Javascript 如何使D3图表响应

我正在努力使这个基本的D3图表具有响应性。我添加了一个事件侦听器，它调用resize函数，在该函数中，我更新了x和y比例，改变了svg的宽度和高度，并使用更新的值调用init函数。谢谢

          let w = () => {return window.innerWidth}
          let h = () => {return window.innerHeight}

          let svg = d3.select("body")
                      .append("svg")
                      .attr("width", w())
                      .attr("height", h())

          let data = d3.range(25).map(function() {
            return parseInt(Math.random() * 100)
          })

          const margin = () =>  {return {right: parseInt(w()*.95),
            bottom: parseInt(h()*.95)}
          }

          let x = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([0, margin().right])

          let y = d3.scaleLinear()
            .domain([0, data.length])
            .range([0, margin().bottom])

          const init = () => {
            svg.selectAll(".bar")
              .data(data)
              .enter()
                .append("rect")
                .classed("bar", true)
                .attr("x", 0)
                .attr("y", (d, i) => y(i))
                .attr("width", (d) => {return x(d)})
                .attr("height", (d) => {return y(1) - 1})
                .attr("fill", (d) => {return "rgb(0, 0, " + d + ")"})
                .on("mouseover", function() {
                  d3.select(this).attr("fill", "red")
                })
                .on("mouseout", function(d) {
                  d3.select(this).attr("fill", "rgb(0, 0, " + d + ")")
                })

            svg.selectAll(".bar-label")
              .data(data)
              .enter()
                .append("text")
                .classed("bar-label", true)
                .attr("x", (d) => {return x(d)})
                .attr("dx",(d) => {return x(1)})
                .attr("y", (d,i) => {return y(i)})
                .attr("dy", (d,i) => {return y(1) / 1.5})
                .text((d) => {return d})
          }

          const resize = () => {
            svg.attr("width", w())
                .attr("height", h())
            x = d3.scaleLinear()
              .domain([0, d3.max(data)])
              .range([0, margin().right])

            y = d3.scaleLinear()
              .domain([0, data.length])
              .range([0, margin().bottom])

            init()
          }
          init()

          d3.select(window).on("resize", resize)
          </script>
        </html>

let w=（）=>{return window.innerWidth}
设h=（）=>{return window.innerHeight}
让svg=d3.select（“body”）
.append（“svg”）
.attr（“宽度”，w（））
.attr（“高度”，h（））
设data=d3.range（25.map）（函数（）{
返回parseInt（Math.random（）*100）
})
常量边距=（）=>{return{right:parseInt（w（）*.95），
底部：parseInt（h（）*.95）}
}
设x=d3.scaleLinear（）
.domain（[0，d3.max（数据）]）
.range（[0，margin（）.right]）
设y=d3.scaleLinear（）
.domain（[0，data.length]）
.range（[0，margin（）.bottom]）
常量init=（）=>{
svg.selectAll（“.bar”）
.数据（数据）
.输入（）
.append（“rect”）
.classed（“bar”，真）
.attr（“x”，0）
.attr（“y”，（d，i）=>y（i））
.attr（“宽度”，（d）=>{return x（d）}）
.attr（“高度”，（d）=>{returny y（1）-1}）
.attr（“fill”，（d）=>{return“rgb（0,0，+d+”）}）
.on（“鼠标悬停”，函数（）{
d3.选择（此）.attr（“填充”、“红色”）
})
.开启（“鼠标出”，功能（d）{
d3.选择（this）.attr（“填充”、“rgb（0,0，+d+）”）
})
svg.selectAll（“.bar标签”）
.数据（数据）
.输入（）
.append（“文本”）
.classed（“条形标签”，正确）
.attr（“x”，（d）=>{return x（d）}）
.attr（“dx”，（d）=>{return x（1）}）
.attr（“y”，（d，i）=>{返回y（i）}）
.attr（“dy”，（d，i）=>{returny y（1）/1.5}）
.text（（d）=>{return d}）
}
常量大小=（）=>{
attr（“宽度”，w（））
.attr（“高度”，h（））
x=d3.scaleLinear（）
.domain（[0，d3.max（数据）]）
.range（[0，margin（）.right]）
y=d3.scaleLinear（）
.domain（[0，data.length]）
.range（[0，margin（）.bottom]）
init（）
}
init（）
d3.选择（窗口）。打开（“调整大小”，调整大小）

我可能在这里遗漏了一些东西—如果您给出一个答案会有所帮助—但是为什么您希望SVG具有响应性呢？为什么不缩放整个图像？通常，如果我需要使用d3实现真正的响应性，我会使用HTML元素而不是SVG，并使用CSS来处理响应性。你可能会避免重画所有的东西。同时要记住，响应性不仅仅意味着整个事情会向上或向下扩展。。。正如你在图像上看到的变化一样（例如，在一定的比例下，图例消失了），感谢Dan和sparta93。使用css不会保持标签的易读性。例如，如果标签不是数字而是月份的名称，我最终会想添加一个函数，将“十一月”改为“十一月”。使用d3使图形具有响应性是实现这一目标的第一步。我可能在这里遗漏了一些东西-如果您给出一个答案，这会有所帮助-但是为什么您希望SVG具有响应性呢？为什么不缩放整个图像？通常，如果我需要使用d3实现真正的响应性，我会使用HTML元素而不是SVG，并使用CSS来处理响应性。你可能会避免重画所有的东西。同时要记住，响应性不仅仅意味着整个事情会向上或向下扩展。。。正如你在图像上看到的变化一样（例如，在一定的比例下，图例消失了），感谢Dan和sparta93。使用css不会保持标签的易读性。例如，如果标签不是数字而是月份的名称，我最终会想添加一个函数，将“十一月”改为“十一月”。使用d3使图形具有响应性是实现该目标的第一步。