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。

d3栅格+带有特征标签的矢量

1 个答案: