时间戳

首页 > 解决方案 > D3 v4 日期刻度从不显示最后一项

javascript - D3 v4 日期刻度从不显示最后一项

问题描述

我正在使用 D3 v4 构建一个非常简单的图表。我正在使用 x 轴的时间刻度。我知道 D3 在使用时间刻度时可以控制显示的刻度数。但这似乎并不能解释这里的行为。

codepen（链接如下）显示了行为的 RTC。我有 5 个日期，非常简单地定义为2018-10-10、2018-10-11等。我正在使用d3.scaleTime()and d3.axisBottom()，没什么特别的。

无论我做什么，最后一个日期都不会包含在刻度线中。为什么会这样？

这是codepen的链接

标签： javascriptd3.jssvgdata-visualization

解决方案

在 d3 中使用时间尺度时存在一定的挑战。这是工作代码。您可以相应地更新刻度格式和高度/宽度-

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")));

推荐阅读