Question

您好我有这个代码用于创建堆积区域图表：

updateArea(yOffset, data = [], categories) {
    const parseTime = this.parseTime;
    const xScale = this.getScale(yOffset, data, categories).date;
    const yScale = this.getScale(yOffset, data, categories).y;

    const area = d3.area()
      .curve(d3.curveCardinal)
      .x(d => xScale(parseTime(d.data.date)))
      .y0(d => yScale(d[0] || 0))
      .y1(d => yScale(d[1] || 0));

    const stack = d3.stack()
      .keys(categories)
      .order(d3.stackOrderReverse)
      .offset(d3.stackOffsetNone);

    if (data.length > 0) {
      const stackContainer = this.vis.append('g')
        .attr('class', 'stack');

      const layer = stackContainer.selectAll('.layer')
        .data(stack(data))
        .enter()
        .append('g')
        .attr('class', 'layer');

      layer.append('path')
        .attr('class', 'area')
        .style('fill', (d, i) => d3.schemeCategory20[i])
        .attr('d', area);
    }

    const legend = this.vis.append('g')
      .attr('class', 'legend');

    legend.selectAll('.legend-item')
      .data(stack(data))
      .enter()
      .append('circle')
        .attr('r', 5)
        .attr('cx', 20)
        .attr('cy', (d, i) => yOffset + 20 + i * 12)
        .attr('stroke', 'none')
        .attr('fill', (d, i) => d3.schemeCategory20[i]);

    legend.selectAll('.legend-item')
      .data(stack(data))
      .enter()
      .append('text')
        .attr('class', 'legend-item')
        .attr('x', 30)
        .attr('y', (d, i) => yOffset + 24 + i * 12)
        .text(d => d.key);
  }

我想要堆叠堆积的区域，使它们重叠，然后我可以使区域不透明.3或其他东西。

当我尝试这样做时：

.data(data)
            .enter()
            .append('g')
            .attr('class', 'layer');

没有任何区域出现。所以只是想弄明白为什么!!

谢谢！

Answer 1

我刚刚这样做了：

layer.append('path')
        .attr('class', 'area')
        .style('fill', 'transparent')
        .style('stroke', (d, i) => d3.schemeCategory20[i])
        .style('stroke-width', 1)
        .attr('d', area);

这似乎有效。谢谢大家的帮助！

在d3中堆叠堆垛机区域图表

1 个答案: