D3 从纬度和经度寻找路径

Question

我正在使用 d3 绘制地图以从数据地图 topojson 渲染路径，我检查了路径保存数据 lat & long。 现在，我想使用 lat & long 查找路径的“路径”元素或数据。有可能吗？

我的数据渲染代码

svgBig.append("g")
  .attr("class", "poly")
.selectAll("path")
  .data(topojson.feature(json, json.objects.depthmap).features)
.enter().append("path")
  .attr("d", path)
  .on("click", function(d,i){
    beforeApplyingData(d);
  })
  .moveToBack()
  .style("stroke", function(d) { return drawcolorpath(d.id); })
  .style("fill", function(d) { return drawcolorpath(d.id); })
  ;

我要绘制地图的深度。数据仅包含键为“id”的深度值。数据只包含 lat & long 和 id（深度），并用 id 填充颜色。

现在我很难找到从纬度和经度获取 d.id（深度）的几乎“路径”。有可能吗？

谢谢

我上传了问题http://jsfiddle.net/1fqsv4oh/1/ 当我点击地图路径时，我得到了 d.id/depth。问题是当我点击船时，我得到了 lat&lng，那么我如何从 lat&lng 获得 d.id/depth 呢？还是船下的海深？

Answer 1

您可以通过使船对点击事件透明来获得底层深度。将此添加到您的 CSS 中或作为您船上的样式：

svg#svgBig image {
    pointer-events:none;
}

船不会注册你的点击事件，它会传递到下面的路径，根据你的要求返回深度。

指针事件在 Chrome 和 Safari 中工作正常，但如果这对您很重要，您应该检查与 IE 的兼容性。

我还展示了如何使用 D3 的阈值比例来简化颜色函数。这些对于您在此处执行的操作非常有用：13 种颜色，12 个不均匀间隔的阈值。看看你小提琴中的 cmets 看看它是如何完成的：http://jsfiddle.net/1fqsv4oh/2/

var quantizeCustom3 = d3.scale.threshold()
    .domain([-40,-35,-30,-25,-20,-15,-10,-5,0,25,50,75,100])
    .range(color);