D3动态生成的SVG无法随容器自适应调整，应如何修改代码？

核心修改点 #

• 存储RangeSlider实例到变量，方便后续更新配置、触发重绘
• 新增窗口resize事件监听，搭配防抖逻辑控制重绘频率，避免高频触发导致性能损耗
• 抽离宽度计算逻辑，初始化和窗口变化时复用同一份规则，保证适配逻辑一致
• （可选优化）将宽度计算从固定依赖窗口宽度改为读取容器实际可用宽度，适配容器本身的响应式规则，灵活性更高

修改后完整代码 #

JavaScript部分 #

let rangeSlider = null;
let resizeTimer = null;
// 防抖延迟，可根据实际需求调整，单位为毫秒
const DEBOUNCE_DELAY = 200;

d3.json('https://gist.githubusercontent.com/bumbeishvili/a0ab3299b4e4eb1557085317b9136ec1/raw/ba488da953d2fa0e64ff2469a209c520fd408055/dateData.json')
.then(data=>{
  // 初始化滑块并存储实例
  rangeSlider = new RangeSlider()
    .container('.chart-container')
    .svgWidth(getSliderWidth())
    .svgHeight(100)
    .data(data)
    .accessor(d=>new Date(d))
    .onBrush(d=>{
       d3.select('.range').html(`range is [` + d.range[0].toLocaleDateString('en')+', '+ d.range[1].toLocaleDateString('en')+`]`)
       d3.select('.data').html(`selected data length - `+d.data.length)
    })
    .render()
})

// 统一宽度计算逻辑
function getSliderWidth() {
  // 原有逻辑：基于窗口宽度计算
  return window.innerWidth - 20

  // 更推荐的响应式写法：基于容器实际宽度计算，替换上面的return即可
  // return document.querySelector('.chart-container').clientWidth - 20
}

// 窗口尺寸变化监听
window.addEventListener('resize', () => {
  if (!rangeSlider) return
  clearTimeout(resizeTimer)
  resizeTimer = setTimeout(() => {
    // 更新宽度后触发重绘
    rangeSlider.svgWidth(getSliderWidth()).render()
  }, DEBOUNCE_DELAY)
})

已知HTML问题修复 #

原有HTML代码中容器样式存在语法错误，padding=left:20px需改为padding-left:20px，否则左内边距不会生效，修正后代码如下：

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/data-driven-range-slider@1.0.1/index.js"></script>

<div class="chart-container" style="margin-top:50px;border-radius:5px;padding-top:30px;padding-left:20px;background-color:#30363E;"> </div>

内容的提问来源于stack exchange，提问作者iskandarblue