D3 Geo albers USA 地图错误地显示了波多黎各和弗吉尼亚州答案

【问题标题】：D3 Geo albers USA map showing Puerto Rico and Virginia incorrectlyD3 Geo albers USA 地图错误地显示了波多黎各和弗吉尼亚州
【发布时间】：2013-11-08 02:47:06
【问题描述】：

无法在 D3 中显示干净的美国各州地理地图。

我从http://examples.oreilly.com/0636920026938/chapter_12/04_fill.html复制了准确的代码还从http://examples.oreilly.com/0636920026938/chapter_12/us-states.json下载了us-states.json
在 CentOS 上的 firefox 中，我只看到一个蓝色的大钢盒覆盖整个 svg 元素而不是各个状态。
最终发现 d3.v3.js 不支持波多黎各，因此删除了 us-states.josn 文件中包含波多黎各描述的最后一行。
还是拿个大钢箱；遍历 html 显示对应于 Virginia 的路径元素还显示了一个横跨整个 SVG 元素的大方形钢蓝色框。
添加了 style("opacity",function(d) { if (d.properties.name=="Virginia") return 0.0; else return "1.0"; })
现在地图显示了除弗吉尼亚之外的所有州，其中显示了空白区域和波多黎各，我手动从数据文件中删除了这些州。
在 html 元素和 json 文件中查看弗吉尼亚州的几何形状，并没有发现弗吉尼亚州有什么不同或独特之处，它被绘制成 3 部分，但华盛顿等其他州被绘制成四部分。
李>
关于未正确显示弗吉尼亚的任何建议。对 Virginia 的 HTML 标记的检查看起来也不错，并且似乎反映了数据。如何添加调试代码以更详细地了解为什么 D3 内部或外部浏览器难以绘制 Virginia 并默认在整个 svg 区域中绘制一个大钢蓝色框？

代码开始时与书中的示例完全相同，唯一的变化是 d3.v3.js 是从 d3 org 站点中的 zip 文件重新下载的。当然，弗吉尼亚的不透明度以编程方式降低到零

谢谢 .. 以为我遇到了浏览器问题，然后是数据问题，最后是 d3 库版本问题，但都消除了，现在需要帮助来决定下一步要看什么..

【问题讨论】：

标签： path d3.js geo

【解决方案1】：

在版本 2 和版本 3 之间，D3 中的地理功能发生了一些变化，您可以在发行说明中找到这些变化，我怀疑这可能是您遇到问题的原因。查看3.1.8 的发行说明，其中提到波多黎各已被删除并应用了剪辑。我认为这些可以解释你的地图发生了什么。 FWIW 我刚刚使用 d3.v2 测试了该代码，并且所有内容都按预期呈现。在您的地图中，您可以通过将填充设置为 none 并将您的 stoke 设置为导致您期望的轮廓的东西，而不是回答您的问题，从而部分地解决您遇到的问题。我建议在 d3 google 组上发布这个，因为 Scott Murray 经常在那里发帖，我相信他已经有了答案。

【讨论】：

谢谢一百万。我有 d3.v3.js 的 3.3.8 和 3.3.9 版本。恢复到 d3.js 的 3.1.8 版本解决了这个问题。为了确定现在我已经根据版本 d3.318.js、d3.338.js、d3.339.js 重新标记了我的 d3.js 库，所以我记得更改次要版本可能会破坏某些功能。
我遇到了和 OP 一样的问题。恢复到旧版本的 D3 并从我的 json 文件中删除波多黎各修复了它。非常感谢，user1614080

【解决方案2】：

在弗吉尼亚的 JSON 代码中，它看起来像在代码中插入了一个框的轮廓……它是弗吉尼亚多面体的三个部分之一。如果您删除此框（它只有四个坐标），JSON 应该可以工作。在完整的美国地图上，您将失去阿拉斯加/夏威夷周围的轮廓。

【讨论】：

【解决方案3】：

刚刚检查了 w.Scott Murray，他确认弗吉尼亚州的坐标确实可以正常工作，但 D3 在 3.1.8 版本中改变了它处理地理数据的方式。截至今天，新版本的 us-states.json 现已在此处提供：http://examples.oreilly.com/0636920026938/chapter_12/us-states.json 并且适用于最新的 D3 3.4.6 版本。

【讨论】：