javascript - 让 d3 time.scale 对象具有刻度并被量化

Question

我制作了一个 slider ，允许选择年份范围。但是，我希望每 5 年一次成为一个潜在的选择——因此，例如，如果 slider 在 1953 年下降，它应该落在 1950 年或 1955 年。

我猜我需要做两件事 -- 首先，为 x 轴定义我的刻度线，这样它们每 5 年一次。

我猜以下应该可行:

var x = d3.time.scale()
    .domain([format.parse('1950'), format.parse('2015')])
    .range([0, width])
    .ticks(d3.time.year, 4)
    .clamp(true);

但好像没有。设置好刻度线后，我如何才能让 slider 仅落在以 0 或 5 结尾的年份上？

http://jsfiddle.net/dwwj9663/

Answer 1

句柄位置由以下决定 handle.attr("cx", 位置)

所以你需要做的是找到离你的画笔最近的以 0 或 5 结尾的年份，如下所示

function brushed() {


var value = brush.extent()[0];

  if (d3.event.sourceEvent) { // not a programmatic event
    value = x.invert(d3.mouse(this)[0]);
    brush.extent([value, value]);
  }
    var d = new Date(value);
    var y = d.getFullYear();
    var yy = y - y%5;
    var dt = new Date(yy,0,0);
  handle.attr("cx", x(dt.getTime()));
  d3.select("body").style("background-color", d3.hsl(value, .8, .8));
}

jsfiddle http://jsfiddle.net/7q0gboq3/