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];
      });
    }

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

组件模板中的SVG使用简单的<svg width='800' height="300"></svg>

创建

非常感谢任何帮助

Answer 1

如果您希望它扩展到其父容器，您需要为SVG提供viewBox，而不是width和height。

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

使D3堆积条形图填充父SVG容器

1 个答案: