javascript - d3标线具有填充颜色？

Question

我正在尝试在世界 map 上显示一个网格，其中每个网格单元都根据一些数据(例如温度或湿度)填充了一种颜色。我试图在此处改编简单的世界 map 示例: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)); });

但是，那是行不通的。有没有办法填充由刻度生成的网格单元？如果没有，那么在 map 上用填充的单元格覆盖长而长的网格的最佳方法是什么？

Answer 1

我创建了d3-grid-map来解决特定的问题，即通过在 Canvas 层上进行绘制来将稀疏的全局0.5度网格单元放置在d3 map 上。它应尽力支持其他网格大小。它处理几种形式的javascript类型的数组输入，但是可以使用更多的概括。