如何在d3中创建一条线？

<script src="https://d3js.org/d3.v7.min.js"></script>

<svg id="chart"></svg>

var data = [
  { x: 0, y: 5 },
  { x: 1, y: 9 },
  { x: 2, y: 7 },
  { x: 3, y: 5 },
  { x: 4, y: 3 }
];

var xScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.x; })])
  .range([0, width]);

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

var line = d3.line()
  .x(function(d) { return xScale(d.x); })
  .y(function(d) { return yScale(d.y); });

d3.select("#chart")
  .append("path")
  .datum(data)
  .attr("d", line)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 2);