如何让我的所有图表都显示在我的 html 页面上？

我正在使用 d3.js 在一个 html 页面上排列 4 个图表。问题是，尽管我的所有图表都以某种方式显示出来，但它们并没有像它们应该做的那样相互作用，或者它们与轴重叠（如折线图和条形图）。就森伯斯特图而言，当我点击它时它消失了。这是svg命名错误吗？

<div>
  <svg width="800" height="500" id="line-chart"></svg>
  <svg width="500" height="400" id="map-chart"></svg>
</div>
<div>
  <svg width="900" height="400" id="bar-chart"></svg>
  <svg width="500" height="500" id="sunburst-chart"></svg>
</div>

我像这样设置我的页面，然后为每个图表命名：svg、svg2、svg3、svg4——然后引用上面的 svg ID (#line-chart)。不确定是否以正确的方式完成它。

预期的结果应该是所有图形都在一个象限内并且是单独交互的。地图也应该显示出来。