D3 -如何从对象数组创建多个折线图

// 假设我们有以下数据
const data = [
  { date: '2023-01-01', value1: 10, value2: 20 },
  { date: '2023-01-02', value1: 20, value2: 30 },
  // ...更多数据
];

// 设置 SVG 容器的大小和边距
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = 800 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

// 创建 SVG 容器
const svg = d3.select('body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  .append('g')
    .attr('transform', `translate(${margin.left},${margin.top})`);

// 解析日期
const parseDate = d3.timeParse('%Y-%m-%d');
data.forEach(d => {
  d.date = parseDate(d.date);
});

// 设置 x 轴比例尺
const x = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, width]);

// 设置 y 轴比例尺
const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => Math.max(d.value1, d.value2))])
    .range([height, 0]);

// 创建 x 轴和 y 轴
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);

// 添加坐标轴到图表
svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', `translate(0,${height})`)
    .call(xAxis);

svg.append('g')
    .attr('class', 'y axis')
    .call(yAxis);

// 创建折线生成器
const line = d3.line()
    .x(d => x(d.date))
    .y(d => y(d.value));

// 绑定数据并创建折线
svg.selectAll('.line')
    .data([data.map(d => ({ date: d.date, value: d.value1 })),
           data.map(d => ({ date: d.date, value: d.value2 }))])
  .enter().append('path')
    .attr('class', 'line')
    .attr('d', line)
    .style('stroke', (d, i) => d3.schemeCategory10[i]);