【问题标题】:Draw a map with d3 and topojson用d3和topojson绘制地图
【发布时间】:2016-08-04 08:27:09
【问题描述】:

感谢 d3 和 topojson,我尝试绘制地图。然后我用这段代码一一绘制每个国家:

d3.json("datamaps-0.5.0/src/js/data/world.topo.json", function(error, map) {
    console.log(map);
    for (i=0; i<map.objects.world.geometries.length; i++)
    {
    svg.append("path")
            .attr("class", "state")
        .datum(topojson.feature(map, map.objects.world.geometries[i]))
        .attr("d", path);
    }
});

虽然代码运行良好,但我正在寻找一种比循环更优雅的方式来绘制这样的地图...

【问题讨论】:

    标签: javascript loops dictionary d3.js topojson


    【解决方案1】:

    一种方法是首先计算您的数据数组,然后使用d3 将其映射到路径

     var features= map.objects.world.geometries
                      .map( //.map: create a new array by applying the function below to each element of the orignal array
                            function(g) { //take the geometry
                              return topojson.feature(map, g) //and return the corresponding feature.
                            }
                          );
     svg.selectAll(".state")
        .data(features)
        .enter()
        .append("path")
        .attr("class", "state")
        .attr("d", path);
    

    这应该与您的代码完全相同。

    【讨论】:

      猜你喜欢
      • 2017-05-05
      • 2016-11-11
      • 1970-01-01
      • 1970-01-01
      • 2014-01-24
      • 1970-01-01
      • 2014-01-26
      • 2020-06-09
      相关资源
      最近更新 更多