CODEWITHSUNDEEP
d3.js
ttmt
ttmt

Reputation: 4984

D3 - Change axis scale on data change

I have a plunker here - https://plnkr.co/edit/kD0fiuBp2MyfebPdHjwR?p=preview

It's a stacked bar chart that updates with new data when you click the 'Update' button

I need to update the scales when the data changes.

The x and y domains are set within the function that redraws the bars so I thought this would also update the axis

How do I update the axis when the data changes

private drawChart(data:any){

      this.x.domain(this.stackedChart.map((d:any)=>{
            return d.date
        }));

        this.y.domain([0, +d3.max(this.stackedSeries, function(d:any){
            return d3.max(d, (d:any)=>{
                return d[1]
            })
        })]);

        this.layersBar = this.layersBarArea.selectAll('.layer')
          .remove()
          .exit()
          .data(data)
            .enter()
            .append('g')
            .classed('layer', true)
            .style('fill', (d:any,i:any)=>{
                return this.colors[i]
            });

        this.layersBar.selectAll('rect')

            .data((d:any)=>{
                return d;
            })
            .enter()
            .append('rect')
            .attr('y', (d:any)=>{
                return this.y(d[1])
            })
            .attr('x', (d:any, i:any)=>{
                return this.x(d.data.date)
            })
            .attr('width', this.x.bandwidth())
            .attr('height', (d:any, i:any)=>{
                return this.y(d[0]) - this.y(d[1]);
            })

            .on("mouseover", ()=>{
                d3.select('.chart-tooltip').style("display", null)
            })
            .on("mouseout", ()=>{
                d3.select('.chart-tooltip').style("display", "none")
            })
            .on("mousemove", (d:any)=>{
                d3.select('.chart-tooltip')
                    .style("left", d3.event.pageX + 15 + "px")
                    .style("top", d3.event.pageY - 25 + "px")
                    .text(d[1] - d[0]);
            });

        // d3.transition(this.svg).select(".y-axis")
    //          .transition()
    //          .duration(1000)
    //          .call(this.yAxis);

    //  d3.transition(this.svg).select(".x-axis")
    //          .transition()
    //          .duration(1000)
    //          .call(this.xAxis);
    }
}

Upvotes: 2

Views: 2859

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

The problem is that you are calling axis transaction before making the axis. 

    d3.transition(this.svg).select(".y-axis")
            .transition()
            .duration(1000)
            .call(this.yAxis);<--this.yaxis is undefined

    d3.transition(this.svg).select(".x-axis")
            .transition()
            .duration(1000)
            .call(this.xAxis);<--this.xaxis is undefined

So instead of

this.createStack(this.stackedChart);
this.drawAxis();

it should be

    this.drawAxis();//make axis first
    this.createStack(this.stackedChart);//do transition here

working code here

Upvotes: 2

Related Questions