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

Question

我有两个 D3.js 图表，我试图在一个 html 页面上显示。一个是漏斗图（来源：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 以了解有关如何尝试让两个版本都运行的更多信息。