在d3中使用javascript创建基于数字或超过100k的行数的条形图？

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

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

const data = [10, 20, 30, 40, 50, ...]; // 根据实际情况准备数据

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

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", (d, i) => i * barWidth) // 根据索引和条形宽度确定x位置
  .attr("y", (d) => height - yScale(d)) // 根据比例尺确定y位置
  .attr("width", barWidth - barPadding) // 设置条形宽度
  .attr("height", (d) => yScale(d)) // 根据比例尺设置条形高度
  .attr("fill", "steelblue"); // 设置填充颜色

const xAxis = d3.axisBottom().scale(xScale); // 根据x比例尺创建x轴
const yAxis = d3.axisLeft().scale(yScale); // 根据y比例尺创建y轴

svg.append("g")
  .attr("transform", "translate(0, " + height + ")")
  .call(xAxis);

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