https://jsfiddle.net/q5vwgxgz/3/
var xAxis = d3.axisBottom(x)
.ticks(15)
.tickSizeInner(25)
Run Code Online (Sandbox Code Playgroud)
所以问题是 X 轴的标签重叠,星期一 31 和十一月。从我可以看到这两个日期的轴之间的空间较小,因此标签重叠。
我可以以某种方式解决这个问题还是图书馆的问题?
使用该图表的项目具有用于开始和结束日期的日期选择器以及用于日期粒度(每天、每月、每年)的下拉菜单,这意味着我不能使用固定数量的刻度和特定格式。
.ticks(15)
Run Code Online (Sandbox Code Playgroud)
这里只是用于demo,在项目中是这样的
Math.min(data.length, Math.floor(width / 100)) // 100 being the 'min' tick width
Run Code Online (Sandbox Code Playgroud)
一种解决方案(很多)是专门设置刻度格式......
.tickFormat(function(d) {
return d3.timeFormat("%b %d")(d)
})
Run Code Online (Sandbox Code Playgroud)
并传播蜱,例如使用timeDay
:
.ticks(d3.timeDay.every(4))
Run Code Online (Sandbox Code Playgroud)
这是带有这些更改的代码:
.tickFormat(function(d) {
return d3.timeFormat("%b %d")(d)
})
Run Code Online (Sandbox Code Playgroud)
.ticks(d3.timeDay.every(4))
Run Code Online (Sandbox Code Playgroud)
但是,请记住,在 D3 中创建时间尺度时并未考虑自定义。他们的行为是动态的。因此,您必须使用临时解决方案来解决每个特定问题。