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

时间:2013-10-29 04:49:41

标签: path d3.js geo

无法显示清洁状态,请在D3中说明地理地图。

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

  2. 下载了us-states.json
  3. 在CentOS上的firefox中,我刚看到一个覆盖整个svg元素的大蓝钢盒,而不是各个州。

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

  5. 仍然得到一个大钢箱;遍历html显示对应于弗吉尼亚州的路径元素还显示了一个横跨完整SVG元素的大方形钢蓝色框。

  6. 添加样式(“不透明度”,函数(d){if(d.properties.name ==“Virginia”)返回0.0;否则返回“1.0”;})

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

  8. 在html元素和json文件中查看弗吉尼亚州的几何图形并且看不到有关Virgina的任何非常不同或独特的内容,它分为3个部分,而华盛顿等其他州则分为四个部分。

  9. 任何有关弗吉尼亚未正确展示的建议。对弗吉尼亚州的HTML标签的检查看起来也不错,似乎反映了数据。如何添加调试代码以确定下一级详细信息为什么D3内部或外部浏览器正在努力绘制弗吉尼亚并且默认在整个svg区域中使用一个大的蓝色钢盒?

  10. 代码的开头与书中的示例完全相同,只是更改是从d3 org网站的zip文件中重新下载的d3.v3.js.当然,弗吉尼亚的不透明度以编程方式减少为零< / p>

    谢谢..以为我有一个浏览器问题,然后是数据问题,最后是一个d3库版本问题但是已经全部淘汰了,现在需要帮助来决定下一步看看..

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分: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版本配合使用。

答案 2 :(得分:0)

在弗吉尼亚州的JSON代码中,看起来有一个插入代码的框的轮廓......它是Virgnia的多边形的三个部分之一。如果你删除这个框(它只有四个坐标),JSON应该可以工作。您将在完整的美国地图上丢失阿拉斯加/夏威夷周围的轮廓。