[英]D3 v4 date ticks never display last item
I'm using D3 v4 to build a very simple chart. 我正在使用D3 v4建立一个非常简单的图表。 I'm using a time scale for the x axis.
我在x轴上使用时间刻度。 I know that D3 maintains control over the number of ticks shown, when using a time scale.
我知道,使用时间刻度时,D3可以控制显示的刻度数。 But that doesn't seem to explain the behavior here.
但这似乎不能解释这里的行为。
The codepen (linked below) shows an RTC of the behavior. 代码笔(在下面链接)显示了行为的RTC。 I have 5 dates, defined very simply as
2018-10-10
, 2018-10-11
, and so on. 我有5个日期,很简单定义为
2018-10-10
, 2018-10-11
,依此类推。 I'm using d3.scaleTime()
and d3.axisBottom()
, nothing fancy. 我正在使用
d3.scaleTime()
和d3.axisBottom()
,没什么d3.axisBottom()
。
No matter what I do, the last date is never included in the tick marks. 不管我做什么,最后一个日期都不会包含在刻度线中。 Why is this happening?
为什么会这样呢?
There are certain challenges while using timescale in d3. 在d3中使用时间刻度时,存在某些挑战。 Here is the working code.
这是工作代码。 You can update the tick format and height/width accordingly-
您可以相应地更新刻度线格式和高度/宽度-
var svg = d3.select('#graph')
.attr('width', '400px')
.attr('height', '200px')
var data = [
new Date('2018-10-10'),
new Date('2018-10-11'),
new Date('2018-10-12'),
new Date('2018-10-13'),
new Date('2018-10-14')
]
var x = d3.scaleTime().range([50, 350])
x.domain(d3.extent(data))
svg.append('g')
.attr('class', 'x-axis')
.call(d3.axisBottom(x) .tickValues(data.map(function(d){return d}))
.tickFormat(d3.timeFormat("%Y-%m-%d")));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.