看不见的向量?结合d3.tile()，d3.zoom()和TopoJSON向量 [英] Invisible vectors? Combining d3.tile(), d3.zoom() and TopoJSON vectors

问题描述

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

I've made effective D3 maps using rasters (d3.tile and map libraries) and vectors (TopoJSON in SVG shapes). But I hit a bug when I combine them.

我遵循了麦克·波斯托克(Mike Bostock)的栅格和矢量示例，尤其是他的栅格和矢量III" ，它可以更改变换和笔触宽度以更新矢量的显示方式.

I followed Mike Bostock's raster-and-vector examples, especially his "Raster & Vector III", which changes the transform and stroke width to update how the vectors are displayed.

我的地图几乎完美运行.但是，在加载时，仅显示栅格图块.向量是不可见的:

My map almost works perfectly. However, upon loading, only the raster tiles are displayed; the vectors are invisible:

但是一旦我触发d3.zoom事件(通过平移或缩放)，就会显示矢量:

But as soon as I trigger the d3.zoom event (by panning or zooming), the vectors are displayed:

我不明白这一点，因为我明确地告诉浏览器，与zoom事件无关，以绘制矢量.这是相关的代码段:

I don't understand this, because I explicitly tell the browser, independently of the zoom event, to draw the vectors. This is the relevant snippet:

  // 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")-无法显示矢量.

For some reason, that last line of the d3.json() function -- .attr("d", path") -- isn't visualising the vectors.

点击此处以查看地图. 单击此处以访问完整的代码及其使用的TopoJSON.

Click here to see the map. Click here to access the full code and the TopoJSON it uses.

我很喜欢这个建议，这让我感到困惑！

I'd love advice on this one, which is baffling me!

(PS抱歉，省略了地图图块，D3.js库等的版权属性-我只是想尽量减少此示例的代码.)

(PS Apologies for omitting copyright attributions for the map tiles, D3.js library, etc - I'm just trying to minimise the code for this example.)

推荐答案

它正在绘制矢量-但是，您不能仅仅依靠缩放和转换d3 geoProjection来转换矢量，因为在缩放时应用了translate和缩放到路径本身-而不是投影:

It is drawing the vectors - however, you can't rely on solely scaling and translating your vector with the d3 geoProjection as when you zoom you apply the translate and scale to the path itself - not the projection:

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

由于未设置缩放和平移，因此在加载矢量时，它们无法正确绘制.它们的绘制非常小-因为您的投影比例为1/tau，且转换为[0,0].检查页面加载时的svg显示它们在那里，而且很小.

Since you don't set scale and translate, when loading your vectors they just aren't drawn correctly. They are drawn very small - as your projection scale is 1/tau, with a translation of [0,0]. Inspecting the svg on page load shows that they are there, and they are tiny.

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

The solution is to draw your vectors prior to map.call("zoom") - this way you can apply the base transform (center, transform, and scale) on the path before manually zooming:

// 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]));
   });

这篇关于看不见的向量?结合d3.tile()，d3.zoom()和TopoJSON向量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！