D3 图表 - 如何开发 Map 以使用 dc.js 和 crossfilter 过滤邮政编码答案

【问题标题】：D3 charts - how to develop Map to filter ZIP code using dc.js and crossfilterD3 图表 - 如何开发 Map 以使用 dc.js 和 crossfilter 过滤邮政编码
【发布时间】：2018-03-21 16:59:02
【问题描述】：

我正在使用 dc.js 图表和交叉过滤器开发一个 d3 图表仪表板。我们必须实现显示美国地图的地图功能，并且用户可以看到州和邮政编码。用户可以放大地图，选择邮政编码，这将过滤其余的图表。我们正在尝试使用它：

http://dc-js.github.io/dc.js/vc/index.html

是否可以使用邮政编码（使用经度和纬度）而不仅仅是州？

我们还发现 http://chelm.github.io/esri-d3/css-sample.html

具有缩放功能但只有状态。虽然我查看了代码，但事实证明状态是使用坐标创建的，以绘制悬停线。

是否可以使用经度和纬度对该地图实施邮政编码？很抱歉，我在处理 D3 地图时非常陌生。我正在尝试为我们的仪表板研究可能的解决方案。

谢谢。

【问题讨论】：

通常我这样做是使用两级 choropleth，一个在州级，一个在邮政编码级。您可以获得美国所有邮政编码的 geojson 形状文件。绘制美国的所有邮政编码对浏览器来说有点费力，但绘制一个州的所有邮政编码是非常可行的。也就是说，获得缩放交互有点技巧。如果您有空间，将美国地图和州地图作为单独的图表保存可能会更容易。

标签： maps dc.js crossfilter

【解决方案1】：

我使用 GoogleMaps API 和 npm 包“points-cluster”和“google-map-react”在 React 应用程序中完成了这项工作。我从this github gist 获得了邮政编码 lat/long 数据。我不会在这里详细介绍，因为这两个 npm 包都有很好的文档。我在两天内启动并运行了它。希望这能让你开始！

【讨论】：

请在此处写下解决方案，而不是包含将来可能会损坏的链接。谢谢！