如何用D3.js绑定嵌套数组数据实现多线图绘制？

看起来你已经有了一个不错的开头！咱们一步步把这个多线图补全，先理清楚几个关键环节：

1. 先搞定比例尺（核心必备步骤） #

D3的线生成器需要把数据里的x、y原始值转换成SVG画布上的像素位置，所以首先得定义适配数据的比例尺。假设你已经有了SVG容器（比如gr.g是你的绘图组元素），先设置基础的画布参数：

// 定义SVG容器的基础尺寸和边距
const width = 600;
const height = 400;
const margin = { top: 20, right: 20, bottom: 30, left: 40 };

// 计算实际绘图区域的宽高（扣除边距）
const plotWidth = width - margin.left - margin.right;
const plotHeight = height - margin.top - margin.bottom;

// 定义x轴线性比例尺：把数据x值映射到绘图区域宽度
const xScale = d3.scaleLinear()
  .domain([0, d3.max(data, group => d3.max(group, d => d.point.x))]) // 取所有点的x最大值作为域上限
  .range([0, plotWidth]);

// 定义y轴线性比例尺：注意SVG的y轴是向下的，所以range要反转
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, group => d3.max(group, d => d.point.y))]) // 取所有点的y最大值作为域上限
  .range([plotHeight, 0]);

2. 更新线生成器的坐标映射逻辑 #

你之前的线生成器直接用了原始数据值，现在要换成经过比例尺转换后的画布坐标：

gr.line = d3.line()
  .x(d => xScale(d.point.x)) // 用xScale转换原始x值为画布像素位置
  .y(d => yScale(d.point.y)); // 用yScale转换原始y值为画布像素位置

3. 补全路径绘制（完善Enter/Update/Exit全生命周期） #

你的代码已经处理了enter和exit环节，但还要兼顾现有元素的更新（如果后续数据变化的话）。咱们把这部分逻辑整合得更完整：

// 绑定数据到pathGroup组元素
let allGroup = gr.g.selectAll(".pathGroup").data(data);

// 移除数据中不再存在的组
allGroup.exit().remove();

// 处理新进入的组元素
let gEnter = allGroup.enter()
  .append("g")
  .attr("class", "pathGroup");

// 给新组添加path元素
gEnter.append("path")
  .attr("class", "line");

// 合并enter和update选择器，统一处理所有路径的样式和数据
let allPaths = allGroup.merge(gEnter)
  .select(".line")
  .attr("d", d => gr.line(d)) // 用line生成器生成路径的d属性值
  .style("fill", "none") // 线不需要填充色
  .style("stroke", (d, i) => d3.schemeCategory10[i]) // 用D3内置配色给每条线分配不同颜色
  .style("stroke-width", 2); // 设置线的粗细

这里用merge()把新创建的元素和已有元素合并，确保不管是新增还是更新数据，所有线都能被正确渲染。

4. 可选但实用：添加坐标轴 #

如果需要让图表更直观，可以补上x轴和y轴：

// 添加x轴（底部）
gr.g.append("g")
  .attr("transform", `translate(0, ${plotHeight})`) // 把x轴定位到绘图区域底部
  .call(d3.axisBottom(xScale));

// 添加y轴（左侧）
gr.g.append("g")
  .call(d3.axisLeft(yScale));

// 把整个绘图组平移到边距位置，留出坐标轴空间
gr.g.attr("transform", `translate(${margin.left}, ${margin.top})`);

5. 最后验证数据结构 #

确认你的数据格式是正确的：每个子数组对应一条线，子数组内的每个对象是线上的点，格式为{point: {x: 数值, y: 数值}}。如果数据有问题，线生成器会报错，可先打印数据排查：

console.log(data);

这样一套流程下来，你的多线图就能正常渲染，每条线会有不同的颜色，并且支持后续的数据更新。

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