我这里有一个骗子 - 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);
}
}
最佳答案
问题是您在创建轴之前调用轴事务。
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.js - D3 - 数据更改时更改轴刻度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48883786/