如何在HTML页面中实现两个D3.js可视化图表并排显示

常见冲突原因 #

• DOM选择器冲突：两段图表代码使用了通用选择器（如d3.select("svg")、d3.select(".chart")），后执行的代码会覆盖前序生成的DOM元素
• 全局变量冲突：两段代码共用了同名的全局变量（如svg、width、xScale），后执行的代码会覆盖变量值，导致前序图表渲染逻辑异常
• 布局溢出：未设置并排布局规则，第二个图表被挤出视口，被误认为未渲染

修复方案 #

1. 定义唯一的独立容器 #

HTML部分声明两个ID唯一的容器，搭配flex布局父容器实现并排：

<div class="chart-group">
  <div id="chart-1"></div>
  <div id="chart-2"></div>
</div>

对应的CSS样式：

.chart-group {
  display: flex;
  gap: 24px;
  width: 100%;
  justify-content: center;
}
#chart-1, #chart-2 {
  flex-shrink: 0;
}

2. 隔离作用域避免变量冲突 #

将两个图表的逻辑分别封装到独立作用域，不要使用全局变量存储图表相关参数：

方案A：用IIFE（立即执行函数）隔离

// 渲染第一个图表
(function () {
  const data = [/* 第一个图表的数据集 */];
  const width = 500, height = 400;
  // 仅选择对应ID的容器插入SVG
  const svg = d3.select("#chart-1")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
  // 剩余图表渲染逻辑
})();

// 渲染第二个图表
(function () {
  const data = [/* 第二个图表的数据集 */];
  const width = 500, height = 400;
  const svg = d3.select("#chart-2")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
  // 剩余图表渲染逻辑
})();

方案B：封装通用渲染函数（推荐，可减少重复代码）

// 抽离公共逻辑为可复用函数
function renderD3Chart(containerId, dataset) {
  const width = 500, height = 400;
  const svg = d3.select(`#${containerId}`)
    .append("svg")
    .attr("width", width)
    .attr("height", height);
  // 通用图表渲染逻辑，使用传入的dataset做数据绑定
}

// 分别传入不同容器ID和数据集调用
const data1 = [/* 第一个图表数据集 */];
const data2 = [/* 第二个图表数据集 */];
renderD3Chart("chart-1", data1);
renderD3Chart("chart-2", data2);

3. 额外排查项 #

• 检查图表内元素的类名、ID是否重复，若有自定义样式，可给不同图表的元素加专属前缀避免样式覆盖
• 打开浏览器开发者工具控制台，排查是否有变量未定义、数据绑定异常等报错信息

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