如何使用d3.js图编写图

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

const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const data = [
  { month: "Jan", sales: 100 },
  { month: "Feb", sales: 200 },
  { month: "Mar", sales: 150 },
  // ...
];

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * barWidth)
  .attr("y", (d) => height - d.sales)
  .attr("width", barWidth - barPadding)
  .attr("height", (d) => d.sales)
  .attr("fill", "steelblue");

svg.selectAll("rect")
  .on("mouseover", function(d) {
    d3.select(this)
      .attr("fill", "orange");
  })
  .on("mouseout", function(d) {
    d3.select(this)
      .attr("fill", "steelblue");
  });

const xScale = d3.scaleBand()
  .domain(data.map((d) => d.month))
  .range([0, width])
  .padding(0.1);

const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, (d) => d.sales)])
  .range([height, 0]);

const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);

svg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(xAxis);

svg.append("g")
  .call(yAxis);