d3.js 多系列折线图

// 数据
var data = [
  {date: "2023-01-01", series1: 10, series2: 20},
  {date: "2023-01-02", series1: 15, series2: 25},
  // ...
];

// 设置 SVG 容器
var svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 300);

// 创建比例尺
var x = d3.scaleTime().range([0, 500]);
var y = d3.scaleLinear().range([300, 0]);

// 设置坐标轴
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);

// 添加坐标轴到 SVG
svg.append("g")
    .attr("transform", "translate(0," + 300 + ")")
    .call(xAxis);
svg.append("g")
    .call(yAxis);

// 创建折线生成器
var line = d3.line()
    .x(function(d) { return x(new Date(d.date)); })
    .y(function(d) { return y(d.series1); });

// 添加折线到 SVG
svg.append("path")
    .datum(data)
    .attr("class", "line series1")
    .attr("d", line);

// 重复上述步骤，为 series2 创建另一条折线...

// 样式
d3.select(".series1").style("stroke", "blue");
// 为其他系列设置样式...