CODEWITHSUNDEEP
javascriptd3.js
orange1
orange1

Reputation: 2939

Getting a d3 time.scale object to have ticks and be quantized

I have made a slider that allows for one to select a range of years. However, I'd like for only every 5 years to be a potential option -- so if the slider is dropped at 1953 for example, it should either land on 1950 or 1955.

I am guessing there are two things that I need to do -- first off, define my tick marks for the x axis so they are every 5 years.

I'm guessing the following should work:

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

but it doesn't seem to. Once I have my tick marks set, how would I have the slider only land on the years that end in 0s or 5s?

http://jsfiddle.net/dwwj9663/

Upvotes: 1

Views: 116

Answers (1)

Yongzhi
Yongzhi

Reputation: 1070

The handle position is decided by the following handle.attr("cx", position)

So the thing you need to do is find years that ends in 0s or 5s closest to your brush, like the following

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/

Upvotes: 2

Related Questions