D3.js D3-数据更改时更改轴刻度
我这里有一个失物招领- 这是一个堆叠条形图,当您单击“更新”按钮时,它会使用新数据进行更新 当数据发生变化时,我需要更新刻度 x和y域是在重画条的函数中设置的,所以我认为这也会更新轴 数据更改时如何更新轴D3.js D3-数据更改时更改轴刻度,d3.js,D3.js,我这里有一个失物招领- 这是一个堆叠条形图,当您单击“更新”按钮时,它会使用新数据进行更新 当数据发生变化时,我需要更新刻度 x和y域是在重画条的函数中设置的,所以我认为这也会更新轴 数据更改时如何更新轴 private drawChart(data:any){ this.x.domain(this.stackedChart.map((d:any)=>{ return d.date })); this.y.domain
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);
}
}
问题是,在创建axis之前调用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
应该是
this.drawAxis();//make axis first
this.createStack(this.stackedChart);//do transition here
工作代码
this.drawAxis();//make axis first
this.createStack(this.stackedChart);//do transition here