在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

你的脚本都声明了名为＆＃39; svg＆＃39;的全局变量。然后在加载文件后在回调中引用此全局变量。如果您检查图形，您会发现它们实际上都在同一个SVG元素上，并且线图应该所在的SVG元素是空的。

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