D3.js 独立图表和 Divs 重叠

Question

我有两个带有 .on("mouseover") listeners 的直方图。每个都绑定到一个唯一的 div id。出于某种原因，它们绘制在同一个 SVG 元素上。

我试图遵循“D3 Tips and Tricks”中的模式......

<div id="Dx"></div>
   <script src="Dx.js" type="text/javascript"></script> 
<div id="Cpt"></div>
   <script src="Cpt.js" type="text/javascript"></script>

为代码“Dx.js”图表是非常相似的“Cpt.js”图表。

我定义了 svg 容器并附加到我唯一的 div ID

var svg = d3.select("#Cpt").append("svg")

后来我svg.selectAll("#Cpt.bar")之前data(data).enter().append("rect")。

谁能帮我理解我做错了什么？

Answer 1

看起来您将两个脚本都包含在同一个命名空间中。这意味着svg它将在某个时候被覆盖。对于顺序运行的代码，这不是问题，因为首先将完成与第一个图表相关的所有工作，然后完成与第二​​个相关的所有工作。运行异步数据加载处理程序函数时会出现此问题。

特别是，当它们运行时，所有顺序代码都已执行。这意味着svg现在引用您上次创建的 SVG。这就是用于所有绘图的内容。

要修复，请将变量名称更改为不同的名称，例如svg1在第一个文件和svg2第二个文件中。或者，您可以在处理程序函数的开始处明确选择您想要的元素，即

var svg = d3.select("#Dx > svg");

在 Cpt.js 中也类似。