如何在div中显示d3图表

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

<div id="chart"></div>

// 选择div容器
const chartContainer = d3.select("#chart");

// 定义数据
const data = [10, 20, 30, 40, 50];

// 创建x轴比例尺
const xScale = d3.scaleBand()
  .domain(data.map((d, i) => i))
  .range([0, chartContainer.clientWidth])
  .padding(0.1);

// 创建y轴比例尺
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([chartContainer.clientHeight, 0]);

// 创建svg元素
const svg = chartContainer.append("svg")
  .attr("width", chartContainer.clientWidth)
  .attr("height", chartContainer.clientHeight);

// 创建柱状图
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => xScale(i))
  .attr("y", d => yScale(d))
  .attr("width", xScale.bandwidth())
  .attr("height", d => chartContainer.clientHeight - yScale(d))
  .attr("fill", "steelblue");

#chart {
  width: 500px;
  height: 300px;
  margin: 20px;
}