d3.js - 使用 d3fc-label-layout 添加缩放到 d3js map

Question

我正在尝试使用 d3fc-label-layout 为英国 map 添加缩放。但是当我放大标签时，标签会移动。据我了解，每次调用缩放时我都必须使用 d3fc-label-layout 重新计算位置，但不确定如何执行此操作这是一把 fiddle https://jsfiddle.net/benderlio/cyvqase5/11/

 var zoom = d3.zoom()
      .scaleExtent([1, 28])
      .on('zoom', function () {

        svg.selectAll('path')
          .attr('transform', d3.event.transform);
        svg.selectAll("circle")
          .attr('transform', d3.event.transform);

        svg.selectAll("text")
          .attr('transform', d3.event.transform);

      });

    svg.call(zoom);

Answer 1

通过在标签本身而不是圆圈和文本项上应用变换，我能够同步点和文本的缩放。

我从投影中重新计算位置并根据缩放变换进行调整:

 const t=d3.event.transform;

 svg.selectAll('path')
   .attr('transform', t);

 svg.selectAll(".label")
   .attr('transform',  d => {
      const p=projection(d.geometry.coordinates)
      return `translate(${ p[0] * t.k + t.x }, ${ p[1] * t.k + t.y }) scale(${ t.k })`
   })

你可以看到它在这里工作:https://jsfiddle.net/p94xhorv/8/

编辑:添加代码以在缩放时处理布局

根据 OP 对我的原始答案的评论，我更改了代码以在用户缩放时重新计算布局，以防止城市变得“隐藏”。

    .on('zoom', function () {
      const t=d3.event.transform;
      svg.selectAll('path')
        .attr('transform', t);

      labels.position(function (d) { 
        const p=projection(d.geometry.coordinates)
        return [p[0]*t.k+t.x, p[1]*t.k+t.y]
      });

      svg.datum(places.features)
        .call(labels);
    });

这是更新后的 jsfiddle https://jsfiddle.net/rpv9743n/