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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使D3堆积条形图填充父SVG容器相关的知识,希望对你有一定的参考价值。

我有一个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>创建

任何帮助是极大的赞赏

答案

如果你想让它扩展到它的父容器,你需要给SVG一个viewBox,而不是widthheight

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

以上是关于使D3堆积条形图填充父SVG容器的主要内容,如果未能解决你的问题,请参考以下文章

d3.js Map (<svg>) 自动适应父容器并随窗口调整大小

如何使熊猫分类堆积条形图比例为 100%

使用 d3.js 制作分组条形图

更改d3条形图的“填充”

条形图没有显示

减少 svg 图中条形之间的间隙