如何在单个页面中同时展示多个D3可视化图表

核心问题原因 #

• HTML结构错误：单个HTML文档仅允许存在1个<body>根标签，你在每个<section>中都嵌套了独立的<body>标签，浏览器解析时会自动丢弃重复的<body>标签，导致DOM结构和预期不符，影响D3元素选择。
• 全局变量冲突：即使你为SVG实例单独命名，若两个JS文件中存在同名的全局变量（如margin、width、height、数据存储变量等），后加载的脚本会覆盖先加载脚本的变量值，导致先运行的脚本逻辑异常。
• 选择器范围错误：若脚本中使用了d3.select("body")这类全局选择器追加SVG元素，而非精准绑定到对应ID的容器，也可能出现元素覆盖、位置偏移的问题。

解决步骤 #

1. 修正HTML结构，删除每个<section>内嵌套的<body>标签，全局仅保留最外层的一个<body>标签，修正后结构示例：

<body>
  <section id="first" class="main special">
    <header class="major">
         <h2>Presidential Elections</h2>
    </header>
    <div id="lineChart"></div>
  </section>
  <section id="second" class="main special">
    <header class="major">
         <h2>House Seats Lost Based on Current President</h2>
    </header>
    <div id="barChart"></div>
  </section>
  <!-- 脚本统一放在body末尾，避免DOM未加载完成就执行脚本 -->
  <script src="lineChart.js"></script>
  <script src="barChart.js"></script>
</body>

2. 给两个JS文件的所有代码包裹立即执行函数（IIFE），隔离作用域避免全局变量冲突，示例：

// lineChart.js 完整代码结构
(function() {
  // 你的所有原有代码写在这里
  const margin = {top: 20, right: 30, bottom: 30, left: 40}
  const width = 800 - margin.left - margin.right
  const height = 400 - margin.top - margin.bottom
  // 精准选择对应容器，不要选body
  const lineChart = d3.select("#lineChart")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    // 后续原有逻辑...
})()

barChart.js也使用相同的IIFE结构包裹，变量名即使和另一个文件重复也不会互相影响。
3. 确认两个JS文件的选择器都精准绑定到对应ID的容器，不要使用全局的body选择器追加SVG元素。

内容的提问来源于stack exchange，提问作者rtd