Question

我制作了一个滑块，允许选择一个年份范围。但是，我希望每隔5年才能成为一个潜在的选择 - 例如，如果滑块在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);

但似乎没有。一旦我设置了刻度标记，我怎么能让滑块仅在0或5s结束的年份落地？

http://jsfiddle.net/dwwj9663/

Answer 1

手柄位置由以下决定 handle.attr（“cx”，position）

所以你需要做的就是找到最接近刷子的0或5s的年份，如下所示

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/

获取d3 time.scale对象以获得刻度并进行量化

1 个答案: