html - D3.js独立图表和div重叠

Question

我有two histograms with .on("mouseover") listeners .每个都绑定(bind)到一个唯一的 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")

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

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

Answer 1

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

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

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

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

在 Cpt.js 中也是如此。