D3 - 多线图，线位置偏移

以下是一个使用D3.js创建多线图，并在线位置上进行偏移的示例代码：

// 数据源
var data = [
  { name: "线1", values: [5, 10, 15, 20, 25] },
  { name: "线2", values: [10, 15, 20, 25, 30] },
  { name: "线3", values: [15, 20, 25, 30, 35] }
];

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

// 创建比例尺
var xScale = d3.scaleLinear()
  .domain([0, data[0].values.length - 1])
  .range([30, 370]);

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

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

// 创建路径元素并绑定数据
var paths = svg.selectAll("path")
  .data(data)
  .enter()
  .append("path")
  .attr("d", function(d) { return line(d.values); })
  .attr("fill", "none")
  .attr("stroke", function(d, i) { return d3.schemeCategory10[i]; })
  .attr("stroke-width", 2);

// 对每条线进行偏移
paths.attr("transform", function(d, i) {
  var xOffset = i * 20; // 偏移量
  var yOffset = 0;
  return "translate(" + xOffset + "," + yOffset + ")";
});

这段代码首先创建了一个SVG容器，并定义了数据源。然后，创建了x轴和y轴的比例尺，并定义了线生成器。接下来，创建了路径元素并绑定了数据，设置了路径的颜色和宽度。最后，对每条线进行了偏移，通过修改transform属性来实现。这里的偏移量xOffset可以根据需要自行调整。