我想避免 d3 中 x 轴上的时间重叠

时间:2021-05-03 20:36:25

标签: typescript d3.js x-axis

这是我的代码,我想知道我可以进行哪些更改以避免时间重叠。我想让时间刻度逐渐增加,只想要 10 个或 5 个刻度,然后刷新它。

createAxis(){
    this.x_Axis = this.chart.append('g')
    .classed('x-axis', true)
    .attr("transform", "translate(0," + this.height + ")")
    .call(d3.axisBottom(this.x).ticks(d3.timeDay(1)))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-65)" );
    this.y_Axis = this.chart.append('g')
    .classed('y-axis', true)
    .call(d3.axisLeft(this.y).ticks(7));
    }
    this.chart.selectAll(".x-axis").remove();
    this.x_Axis = this.chart.append('g')
    .classed('x-axis', true)
    .attr("transform", "translate(0," + this.height + ")")
    update(data: LChart[]){                                               
    .call(d3.axisBottom(this.x).ticks(d3.timeHour.every(4)))
    .selectAll(".tick text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-65)" );
    } 

0 个答案:

没有答案
相关问题