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

Question

我正在尝试在单个html页面上显示两个D3.js图表​​。一个是漏斗图（来自这里：https://github.com/smilli/d3-funnel-charts）;另一个是美国的数据地图，上面有气泡。

漏斗图表工作正常，直到添加数据图代码为止;然后只有漏斗图表没有完全渲染其所有图层。重新加载页面时，问题会变得更糟。

我是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以获取有关如何尝试运行两个版本的更多信息。