Question

我这里有一个傻瓜 - https://plnkr.co/edit/kD0fiuBp2MyfebPdHjwR?p=preview

这是一个堆积的条形图，当您点击“更新”时，它会使用新数据进行更新。按钮

我需要在数据更改时更新比例。

x和y域在重绘条形的函数中设置，所以我认为这也会更新轴

如何在数据更改时更新轴

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

Answer 1

问题在于您在创建轴之前调用轴事务。

    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

所以而不是

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

应该是

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

工作代码here

D3 - 更改数据更改时的轴刻度

1 个答案: