D3 - General Update Pattern in stacked bar chart

Question

I have a demo here https://stackblitz.com/edit/basic-stacked-bar-chart-mt-yo9h6z?file=src/app/bar-chart.ts

Its a stacked bar chart using D3 in an Angular app.

I want the chart to be responsive so when the page is resized the chart width will increase and the height will be stay the same.

I'm doing this by capturing the window resize and then calling the function that draws the chart.

This works for the axis but I cant get the bars to redraw.

I think it's to do with the way I'm trying to us the update pattern

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();

Cam anyone see how I can redarw the bars when the updat function is called.

Mark Mark · Accepted Answer · 2019-06-03T12:34:25

You are only acting on the enter selection. You need to create the selection, enter the new elements and 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);

Updated code here.

D3 - General Update Pattern in stacked bar chart

1 Answers