如何在d3.js多线图上渲染线条？

// 示例数据
var data = [
  [{x: 0, y: 5}, {x: 1, y: 9}, {x: 2, y: 7}, {x: 3, y: 5}],
  [{x: 0, y: 3}, {x: 1, y: 6}, {x: 2, y: 2}, {x: 3, y: 8}],
  [{x: 0, y: 1}, {x: 1, y: 4}, {x: 2, y: 9}, {x: 3, y: 3}]
];

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 300);

// 设置比例尺
var xScale = d3.scaleLinear()
  .domain([0, 3])
  .range([0, 400]);

var yScale = d3.scaleLinear()
  .domain([0, 10])
  .range([300, 0]);

// 创建线条生成器
var line = d3.line()
  .x(function(d) { return xScale(d.x); })
  .y(function(d) { return yScale(d.y); });

// 绘制线条
svg.selectAll(".line")
  .data(data)
  .enter()
  .append("path")
  .attr("class", "line")
  .attr("d", line)
  .style("stroke", "steelblue")
  .style("fill", "none");