javascript - 使 D3 堆叠条形图填充父 SVG 容器

Question

我有一个 D3 堆叠条形图组件，我试图让它填充父 SVG 中的可用空间。这将允许我使用 HTML 调整图表的大小，而不必手动输入大小。

目前我的尺寸是硬编码的，我不知道如何将其更改为更具响应性的格式。

这里是相关的组件代码片:

let data = this.get('data')
    let div = select('body')
      .append("div")
      .attr("class", "stack-tooltip")
    let series = stack()
      .keys(["count1", "count2", "count3"])
      .offset(stackOffsetDiverging)
      (data);

    let svg = select(this.$('svg')[0]),
      margin = {
        top: 20,
        right: 30,
        bottom: 30,
        left: 60
      },
      width = +svg.attr("width"),
      height = +svg.attr("height");

    let x = scaleBand()
      .domain(data.map(function(d) {
        return d.label;
      }))
      .rangeRound([margin.left, width - margin.right])
      .padding(0.1);

    let y = scaleLinear()
      .domain([min(series, stackMin), max(series, stackMax)])
      .rangeRound([height - margin.bottom, margin.top]);

    let z = scaleOrdinal().range(['#DAEAF1', '#99CFE0', '#72BCD4']);

    svg.append("g")
      .selectAll("g")
      .data(series)
      .enter().append("g")
      .attr("fill", function(d) {
        return z(d.key);
      })
      .selectAll("rect")
      .data(function(d) {
        return d;
      })
      .enter().append("rect")
      .attr("width", x.bandwidth)
      .attr("x", function(d) {
        return x(d.data.label);
      })
      .attr("y", function(d) {
        return y(d[1]);
      })
      .attr("height", function(d) {
        return y(d[0]) - y(d[1]);
      })
      .attr('opacity', d => {
        let selected = this.get('selectedLabel');
        return (selected && d.data.label !== selected) ? '0.5' : '1.0';
      })

  function stackMin(h) {
      return min(h, function(d) {
        return d[0];
      });
    }

    function stackMax(h) {
      return max(h, function(d) {
        return d[1];
      });
    }

我确实尝试将“X”和“Y”函数的 rangeRound 值更改为百分比，但是在尝试将 X 和 Y 属性中的值更改为模板时，我无法呈现图表的条形图文字。

组件模板中的 SVG 是用一个简单的 <svg width='800' height="300"></svg> 创建的

非常感谢任何帮助

Answer 1

如果你想让它缩放到它的父容器，你需要给 SVG 一个 viewBox，而不是 width 和 height.

viewBox 告诉浏览器内容占据 SVG 坐标空间的哪个区域。这样它就知道如何缩放内容。