Question

我试图在世界地图上显示网格，其中每个网格单元基于一些数据（例如，温度或湿度）填充颜色。我想在这里调整简单的世界地图示例：http://techslides.com/demos/d3/d3-worldmap-boilerplate.html

我想我可以使用内置的d3格线并添加填充色，如下所示：

g.append("path")
 .datum(graticule)
 .attr("class", "graticule")
 .attr("d", path)
 .style("fill", function(d, i) { return color(Math.floor((Math.random() * 20) + 1)); });

但是，这不起作用。有没有办法填写格线生成的网格单元格？如果没有，那么在地图上用填充的单元格覆盖lat，long网格的最佳方法是什么？

Answer 1

要做这样的事情，首先用所有N / S / E / W创建数据集来定义限制。

[
  {
      "Driver": {
          "givenName": "Eldorado",
          "familyName": "Vettel" },
      "points": 322,
      "nationality": "German",
      "Constructors": [
          {"name": "Red Bull"}
       ]
  },
  {
      "Driver": {
        "givenName": "Fernando",
        "familyName": "Alonso"
      },
      "points": 207,
      "nationality": "Spanish",
      "Constructors": [
          {"name": "Ferrari"}
      ]
  }
]

下一篇文章你加载你的世界JSON添加这样的路径。

var data set = [{W: -5.0, N: 50.0, E: 10.0, S: 40.0 }, {W: -95.0, N: 50.0, E: -40.0, S: 40.0 }];

在Css上添加：

d3.json("http://techslides.com/demos/d3/data/world-topo.json", function(error, world) {

  var countries = topojson.feature(world, world.objects.countries).features;

  topo = countries;
  draw(topo);
  //iterate over the dataset created above for making paths.
  dataset.forEach(function(bb){
    var arc = d3.geo.graticule()
      .majorExtent([[bb.W, bb.S], [bb.E, bb.N]])
    //this will append the path to the g group so that it moves accordingly on translate/zoom   
    g.append("path")
        .attr("class", "arc")
        .attr("d", path(arc.outline()));

  });  
});

这里有完整的JS：

.arc {
  fill: red;[![enter image description here][1]][1]
  fill-opacity: 0.3;
  stroke: black;
  stroke-opacity: 0.5;
}

图像：

Answer 2

我创建了d3-grid-map来解决在画布图层上绘制在d3地图上放置稀疏全局0.5度网格单元的特定问题。它应该通过一些努力支持其他网格尺寸。它处理几种形式的javascript类型的数组输入，但它可以使用更多的泛化。

d3格子带填充颜色？

2 个答案: