看不见的向量？组合 d3.tile()、d3.zoom() 和 TopoJSON 向量

我已经使用栅格制作了有效的 D3 地图（d3.tile和地图库）和矢量（SVG 形状中的 TopoJSON）。但当我将它们组合起来时，我遇到了一个错误。

我遵循了 Mike Bostock 的光栅和矢量示例，尤其是他的“光栅与矢量 III”，它会更改变换和描边宽度以更新矢量的显示方式。

My map almost工作完美。然而，加载后，仅显示光栅图块；向量是不可见的：

但一旦我触发d3.zoom事件（通过平移或缩放），显示矢量：

我不明白这一点，因为我明确告诉浏览器，独立于缩放事件来绘制向量。这是相关的片段：

  // read in the topojson
  d3.json("ausElectorates.json", function(error, mapData) {
    if (error) throw error;

    var electorates = topojson.feature(mapData, mapData.objects.tracts);

    // apply a zoom transform equivalent to projection{scale,translate,center}
    map.call(zoom)
      .call(zoom.transform, d3.zoomIdentity
        .translate(mapWidth / 2, mapHeight / 2)
        .scale(1 << 12)
        .translate(-centre[0], -centre[1]));

    // draw the electorate vectors
    vector.selectAll("path")
      .data(electorates.features)
      .enter().append("path")
        .attr("class", "electorate")
        .attr("d", path);
  });

由于某种原因，最后一行d3.json()功能 -.attr("d", path")-- 没有可视化向量。

点击这里查看地图。点击这里访问完整代码及其使用的 TopoJSON。

我很想得到关于这个问题的建议，这让我感到困惑！

（PS 对于省略地图图块、D3.js 库等的版权归属表示歉意 - 我只是试图最小化此示例的代码。）

它正在绘制矢量 - 但是，您不能仅仅依赖于使用 d3 geoProjection 缩放和平移矢量，因为当您缩放时，您将平移和缩放应用于路径本身 - 而不是投影：

  vector.selectAll("path")
    .attr("transform", "translate(" + [change.x, change.y] + ")scale(" + change.k + ")")
    .style("stroke-width", 1 / change.k);

由于您没有设置比例和平移，因此在加载矢量时它们不会正确绘制。它们画得很小 - 因为你的投影比例是1/tau，翻译为[0,0]。检查页面加载时的 svg 表明它们在那里，而且很小。

解决方案是在之前绘制向量map.call("zoom")- 这样，您可以在手动缩放之前在路径上应用基本变换（中心、变换和缩放）：

// read in the topojson
d3.json("ausElectorates.json", function(error, mapData) {
if (error) throw error;

var electorates = topojson.feature(mapData, mapData.objects.tracts);

// draw the electorate vectors
vector.selectAll("path")
  .data(electorates.features)
  .enter().append("path")
    .attr("class", "electorate")
    .attr("d", path);

// apply a zoom transform equivalent to projection{scale,translate,center}
map.call(zoom)
  .call(zoom.transform, d3.zoomIdentity
    .translate(mapWidth / 2, mapHeight / 2)
    .scale(1 << 12)
    .translate(-centre[0], -centre[1]));
   });