html - 在 html 页面上定位多个 d3 图的问题

Question

我需要在一个网页上放置多个(最终是 4 个，但我在这里从两个开始)d3 图。正在关注this tutorial ，我创建了两个 div:

<div id="donut"></div>
<div id="line-graph"></div>

然后我将图表附加到它们各自的 div 中，如下所示:

var svg = d3.select("#line-graph").append("svg")

和

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

然而，它们仍然在页面上彼此重叠。我错过了什么？

我知道还有其他人遇到过这个问题，但很多问题要么没有得到解答，要么答案没有解决我的问题。你看我在说什么here .

提前致谢。

Answer 1

您的两个脚本都声明名为“svg”的全局变量，然后在加载文件后在回调中引用该全局变量。如果您检查图表，您会发现它们实际上都在同一个 SVG 元素上，而折线图应该所在的 SVG 元素是空的。

您需要在第二个脚本中重命名变量，以便它们与第一个脚本中的变量具有不同的名称。