在d3.scaleTime()中获取恒定的ticks间隔值

时间:2017-03-16 15:30:31

标签: javascript d3.js

DEMO

我需要使用 d3.scaleTime() 在任意随机日期之间获得一个恒定的刻度值间隔,并在轴上绘图。

但是

timeScale.nice(intervalValue);
//or 
axisXScale.tickValues(timeScale.ticks(10));

没有帮助,我总是得到随机数的滴答值。

根据D3文档

# continuous.ticks([count])

Returns approximately count representative values from the scale’s domain. If count is not specified, it defaults to 10.
The returned tick values are uniformly spaced, have human-readable values (such as multiples of powers of 10), and are guaranteed to be within the extent of the domain.
Ticks are often used to display reference lines, or tick marks, in conjunction with the visualized data.
The specified count is only a hint; the scale may return more or fewer values depending on the domain.

那么我们有什么办法可以得到一个常数而不是近似值

2 个答案:

答案 0 :(得分:0)

我认为你需要做这样的事情:

.ticks(d3.timeMonth.every(1))

有关http://www.d3noob.org/2016/08/changing-number-of-ticks-on-axis-in.html的更多详情。

希望这有帮助!

答案 1 :(得分:0)

DEMO

所以我只是采用了反向时间尺度的方法,并从x值中找到了日期。

  var timeScaleReverse = d3.scaleTime().range([start, end]).domain([0, width]);

  timeScale.nice(intervalValue);

  var tickValues = [];

  for (var i = 0; i < width; i += (width/intervalValue)) {
    tickValues.push(new Date(timeScaleReverse(i)));
  }