仅显示经纬网的线交叉点

时间:2015-08-31 07:24:05

标签: d3.js svg

我试图只显示经纬网内的线交叉点,而不是D3地图中的整条线。

对于d3.geo.graticule是否有任何支持?

非常感谢你的帮助! 亨利

1 个答案:

答案 0 :(得分:3)

您问题的简短回答是:不,无法仅使用d3.geo.graticule呈现交叉点。

但是,通过将想要绘制的交叉点放入辅助数组并将其传递给路径生成器进行渲染,可以轻松实现所需的结果。我分叉了我的一个Plunks来演示解决方案:

  1. 设置包含要传递给path generator的几何对象的辅助数组。

    // Generate two-dimensional array containing the coordinates of all
    // intersections we are interested in.
    var lonLatIntersections = d3.range(-180, 180, 10).map(function(lat) {
        return d3.range(0, 360, 10).map(function(lon) {
          // Return geometry objects that can be handled by the path generator.
          return {type: "Point", coordinates: [lon,lat]};
        });
    });
    
  2. 使用嵌套选择来绑定二维(纬度/经度)数组,并使用输入选择来追加交点。实际绘图是通过将几何对象提供给路径生成器来完成的,该生成器将考虑投影。

    // Do a nested selection to bind the two-dimensional data.
    map.selectAll("g.lat")
        .data(lonLatIntersections)
      .enter().append("g")                  // Create groups per latitude.
        .classed("lat", true)
        .selectAll("circle")
          .data(function(d) { return d; })  // Data binding for longitudes
        .enter().append("path")
          .attr({
            "d": path,                      // Use the path generator to draw points
            "class": "confluence"
          });