使用d3绘制相同的X轴多线图

// 准备数据
var data = [
  [
    { x: 0, y: 5 },
    { x: 1, y: 9 },
    { x: 2, y: 7 },
    // ...
  ],
  [
    { x: 0, y: 3 },
    { x: 1, y: 6 },
    { x: 2, y: 2 },
    // ...
  ],
  // ...
];

// 创建SVG元素
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 300);

// 创建比例尺
var xScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d3.max(d, function(d) { return d.x; }); })])
  .range([0, 400]);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d3.max(d, function(d) { return d.y; }); })])
  .range([200, 0]);

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

// 绘制多条线
svg.selectAll("path")
  .data(data)
  .enter()
  .append("path")
  .attr("d", line)
  .attr("fill", "none")
  .attr("stroke", function(d, i) { return "steelblue"; });

// 添加X轴
svg.append("g")
  .attr("transform", "translate(0, 200)")
  .call(d3.axisBottom(xScale));

// 添加Y轴
svg.append("g")
  .call(d3.axisLeft(yScale));