Question

我在这里有一个演示https://stackblitz.com/edit/basic-stacked-bar-chart-mt-yo9h6z?file=src/app/bar-chart.ts

它是在Angular应用中使用D3堆积的条形图。

我希望图表能够响应，因此在调整页面大小时，图表宽度将增加，而高度将保持不变。

我这样做是通过捕获窗口调整大小，然后调用绘制图表的函数来完成的。

这适用于轴，但我无法获得重绘的条。

我认为这与我尝试向我们提供更新模式的方式有关

this.layersBar = this.chart.selectAll('.layer')
      .data(data)
      .enter()
      .append('g')
      .classed('layer', true)
      .style('fill', (d: any, i: any) => this.colors[i]);

    const bars = this.layersBar.selectAll('rect')
      .data((d: any) => d)
      .enter()
        .append('rect')
        .attr('x', (d) => this.x(d.data.date))
        .attr('width', this.x.bandwidth())
        .attr("y", this.height)
        .attr("height", 0)

    bars    
      .attr('x', (d) => this.x(d.data.date))
      .attr('width', this.x.bandwidth())
      .attr("y", (d) => this.y(d[1]))
      .attr('height', (d: any, i: any) => this.y(d[0]) - this.y(d[1]))

    bars.exit()
      .remove();

任何人都可以看到在调用updat函数时如何重新排列小节。

Answer 1

您仅对enter选择起作用。您需要创建选择，输入新元素，然后输入merge back。

this.layersBar = this.chart.selectAll('.layer')
  .data(data);

this.layersBar = this.layersBar
  .enter()
  .append('g')
  .classed('layer', true)
  .style('fill', (d: any, i: any) => this.colors[i])
  .merge(this.layersBar);

var bars = this.layersBar.selectAll('rect')
  .data((d: any) => d);

bars = bars
  .enter()
    .append('rect')
    .attr('x', (d) => this.x(d.data.date))
    .attr('width', this.x.bandwidth())
    .attr("y", this.height)
    .attr("height", 0)
    .merge(bars);

更新的代码here。

D3-堆积条形图中的常规更新模式

1 个答案: