javascript - d3 栅格+矢量，在要素上带有标签

Question

我一直在看 Mike Bostock 的 d3v4 raster+vector iv example我想做一些类似的东西，但在功能上带有标签。

我找到了documentation说对标记使用单独的路径而不是一个大的路径，示例代码如下

svg.selectAll("path")
 .data(features)
 .enter().append("path")
 .attr("d", d3.geoPath());

我认为在他的例子中看起来像

var projection = d3.geoMercator()
    .scale(1 / tau)
    .translate([0, 0]);

var path = d3.geoPath()
    .projection(projection);    

var vector = svg.selectAll("path");

d3.csv("us-state-capitals.csv", type, function(error, capitals) {
  if (error) throw error;

  vector
      .data(capitals)
      .enter()
        .append("path")
        .attr("d", d3.geoPath().projection(projection));

  // Compute the projected initial center.
  var center = projection([-98.5, 39.5]);

  // Apply a zoom transform equivalent to projection.{scale,translate,center}.
  svg
      .call(zoom)
      .call(zoom.transform, d3.zoomIdentity
          .translate(width / 2, height / 2)
          .scale(1 << 12)
          .translate(-center[0], -center[1]));
});

function zoomed() {
  var transform = d3.event.transform;

  var tiles = tile
      .scale(transform.k)
      .translate([transform.x, transform.y])
      ();

  projection
      .scale(transform.k / tau)
      .translate([transform.x, transform.y]);

这绘制了大写字母，但似乎没有正确地将投影应用于它们，它们都聚集在 svg 的左上角，尽管看起来有正确的坐标。另外，由于它不在 zoomed 函数中，它们不会正确缩放(我认为)，但如果我将附加放在那里，它们根本不会显示。

我还没有开始添加标签，因为我希望大写字母首先正确显示，我认为一旦正确显示，添加 text 元素就会很简单。

Answer 1

你们真的很亲近。首先，将 vector 的初始声明更改为 g，以便我们可以对所有路径进行分组:

var vector = svg.append("g");

然后添加数据和开关向量作为路径的选择:

vector = vector.selectAll("path")
  .data(capitals)
  .enter()
  .append("path");

然后缩放保持不变。

这是code running .