如何根据屏幕大小在D3 js中创建动态y刻度值？

// 选择容器元素
var container = d3.select("#chart-container");

// 获取容器元素的宽度和高度
var width = container.node().getBoundingClientRect().width;
var height = container.node().getBoundingClientRect().height;

// 计算y轴的刻度范围
var yScale = d3.scaleLinear()
  .domain([0, 100]) // 设置刻度范围的最小值和最大值
  .range([height, 0]); // 映射到容器元素的高度

// 创建y轴生成器
var yAxis = d3.axisLeft(yScale);

// 创建SVG元素
var svg = container.append("svg")
  .attr("width", width)
  .attr("height", height);

// 创建g元素并平移到合适的位置
var g = svg.append("g")
  .attr("transform", "translate(50, 0)");

// 创建y轴
g.append("g")
  .call(yAxis);

// 监听窗口大小变化事件
window.addEventListener("resize", function() {
  // 更新容器元素的宽度和高度
  width = container.node().getBoundingClientRect().width;
  height = container.node().getBoundingClientRect().height;

  // 更新y轴的刻度范围
  yScale.range([height, 0]);

  // 更新SVG元素的宽度和高度
  svg.attr("width", width)
    .attr("height", height);

  // 更新y轴的位置
  g.attr("transform", "translate(50, 0)");

  // 更新y轴
  g.select(".axis").call(yAxis);
});