2

在 D3 中显示干净的美国各州地理地图时遇到问题。

  1. 我从http://examples.oreilly.com/0636920026938/chapter_12/04_fill.html复制了确切的代码，还从http://examples.oreilly.com/0636920026938/chapter_12/us-states.json 下载了 us-states.json

  2. 在 CentOS 上的 firefox 中，我只看到一个蓝色的大钢盒覆盖整个 svg 元素，而不是单个状态。

  3. 最终发现 d3.v3.js 不支持波多黎各，因此删除了 us-states.josn 文件中包含波多黎各描述的最后一行。

  4. 还是拿一个大钢箱；遍历 html 显示对应于 Virginia 的路径元素还显示了一个横跨整个 SVG 元素的大方形钢蓝色框。

  5. 添加 style("opacity",function(d) { if (d.properties.name=="Virginia") return 0.0; else return "1.0"; })

  6. 现在地图显示所有州减去显示空白的弗吉尼亚州和我从数据文件中手动删除的波多黎各。

  7. 在 html 元素和 json 文件中查看弗吉尼亚的几何形状，并没有看到弗吉尼亚的任何不同或独特之处，它被绘制成 3 部分，但像华盛顿这样的其他州被绘制成 4 部分。

  8. 为什么弗吉尼亚没有正确显示的任何建议。对 Virginia 的 HTML 标记的检查看起来也不错，并且似乎反映了数据。如何添加调试代码以更详细地了解为什么 D3 内部或外部浏览器在努力绘制弗吉尼亚并默认在整个 svg 区域上绘制一个大钢蓝色框？

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

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

4

3 回答 3

1

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

于 2014-05-07T02:42:48.447 回答
1

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

于 2013-10-29T07:09:57.300 回答
0

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

于 2014-03-16T22:36:55.857 回答