d3连接散点图示例，语法问题

// 创建画布
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 定义散点数据
var data = [
  { x: 50, y: 50 },
  { x: 100, y: 100 },
  { x: 150, y: 150 },
  { x: 200, y: 200 }
];

// 创建散点
var circles = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", 5)
  .attr("fill", "blue");

// 创建连接线
svg.selectAll("line")
  .data(data)
  .enter()
  .append("line")
  .attr("x1", function(d) { return d.x; })
  .attr("y1", function(d) { return d.y; })
  .attr("x2", function(d, i) { return data[i+1] ? data[i+1].x : d.x; })
  .attr("y2", function(d, i) { return data[i+1] ? data[i+1].y : d.y; })
  .attr("stroke", "red")
  .attr("stroke-width", 2);