使用d3为传单创建密度和值热图图层

Question

我想用d3在传单地图上实现热图图层.我有大约2-3k的数据点.

我的数据格式如下:

[{lat: .., lon: .., value: ..}, {lat: .., lon: .., value: ..}, ...]

理想情况下,我想在基于值的热图之间切换,以及基于点的密度.我还需要能够动态更新数据.在视觉上我的目标是这样的:

我知道传单有几个热图插件,两者都不是很活跃.Heatmap.js最接近我的需要.但是,它似乎没有维护,文档与源代码不一致,而且运行速度太慢.我已经广泛使用d3,如果可能的话,我更愿意将它用于热图图层.

有一个或两个块浮动(例如,这一个)但我找不到一个有效.这最接近我的需要.它仍然适用于最新的传单版本,但理想情况下我想使用渐变渐变(如heatmap.js)而不是hexbins.我还需要重写代码处理数据的方式并调整其他一些位(例如,它绘制密度,而不是值).

理想情况下,我希望以Mikes传单风格的方式提供解决方案.有什么建议？

更新:我还发现了webgl-heatmap的这个传单包装,但似乎已经破了

Answer 1

如果您担心热图的性能，我会向您推荐两个选项：Leaflet.heat和Google Maps JS API v3。

最近我一直在使用 Leaflet 热图，在尝试了像你这样的几个热图后，我最终得到了Leaflet.heat。放弃谷歌的唯一原因是许可证，但它确实表现良好。

这是演示页面中的一个示例，包含 10k 点：

它是由 Leaflet 的同一作者制作的，即使它仍然是 alpha/beta 在我的测试中也非常稳定。官方Leaflet 插件页面中没有提到它，我花了一段时间才找到它。

它基于simpleheat，它在 Leaflet 之上创建了一个 HTML5 画布来绘制热图：请记住，它只能在 IE9+ 上工作。

即使从我的测试中每帧绘制 1k 点也非常快。

数据格式是一个由 lat、long 和 value 组成的数组，如下所示：

[[lat, lon, value], [...], [...], ... ]

您可以指定自己的渐变作为创建选项传递它 - 键实际上是值有点奇怪，但它有效 - 只是要小心0：

{
  ...,
  gradient: {0.4: 'blue', 0.65: 'lime', 1: 'red'}
}

如果您正在寻找更多的六边形样式，就在今天早上，我在 bl.ocks.org 上找到了这个：有一个适用于 d3的hexbin 插件，您可以尝试使用以防万一。

与 Leaflet 的集成应该不会那么糟糕：一旦在其上创建了一个图层，您应该能够放置六边形并将它们填充为热图（如本例中所示）