javascript - 是什么导致一个 D3.js 图表与同一页面上的另一个图表发生冲突？

Question

我有两个 D3.js 图表，我试图在单个 html 页面上显示。一种是漏斗图(来源于这里:https://github.com/smilli/d3-funnel-charts)；另一个是美国的数据 map ，上面放置了气泡。

在添加数据映射代码之前，漏斗图可以正常工作；那么只有漏斗图没有完全渲染其所有图层。当页面重新加载时，问题会变得更糟。

我是 D3 的新手，所以如果有人能解释我如何防止第二个图表与第一个图表的渲染发生冲突(？)，我将永远感激不已。

这里是示例代码:http://jsbin.com/dozer/1/edit

Answer 1

根本问题是您尝试在同一页面上使用两个不同版本的 D3，而不对它们进行任何命名空间。如果您查看脚本，您将看到以下两行:

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
...
<script src="http://d3js.org/d3.v3.min.js"></script>

如果您可以使用 D3 v3 找到或创建漏斗图的版本，这可能是最佳的长期解决方案。但是，请参阅this answer有关如何尝试让这两个版本运行的更多信息。