在html页面上定位多个d3图形时出现问题

我需要定位多个最终4，但我从一个网页上的两个d3图开始。下面，我创建了两个div：

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

及

然而，他们在这一页上仍然是首屈一指的。我错过了什么

我知道还有其他人有这个问题，但很多问题要么没有答案，要么答案没有解决我的问题。你可以明白我在说什么

---

提前感谢。

两个脚本都声明了名为“svg”的全局变量，然后在加载文件后在回调中引用此全局变量。如果您检查图形，您将看到它们实际上都位于同一个SVG元素上，而线条图应该位于的SVG元素是空的

---

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

实际上，还有一个问题。有没有想过为什么x轴上的年份现在消失了？这是，这是。我只是刚刚注意到它，但我想它在我第一次添加到div时就不见了。我一直在设计页面样式，但我认为这与此无关。您的x轴超出了SVG的范围。SVG的高度为260px，然后g容器向下平移20px，x轴向下平移260px。因此，x轴的顶部为280px，低于SVG的底部。注意：在Safari和Chrome中，我假设在FF中，您可以右键单击Inspect元素浏览生成的HTML/SVG，并调查类似的问题。Ethan，感谢您的帮助和使用Inspect元素的建议。我对这方面很陌生，所以这很有帮助。没问题。根据我的经验，对于习惯于标准HTML元素的人来说，SVG的溢出行为有点奇怪。欢迎来到d3的精彩世界：-

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

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