Programmatically moving the brush selection d3v4

[Bálint Homoki]

Hi,

I've been searching for hours for a solution to be able to move the brush selection NOT by pixels [200, 600], but by x-values on a time-based x scale.

This works fine, okay

context.select(".brush").call(brush.move, [600, 800]);

But I'm about to figure out how to programmatically move the brush selection to an exact time-frame. I'd like to achieve something like this:

context.select(".brush").call(brush.move, [parseDate('Jan 2007'), parseDate('Dec 2007')]);

I know it doesn't work, but is there anyone to guide me, how to make this feat work?

In d3 v3 it works:

brush.extent([parseDate('Jan 2007'), parseDate('Dec 2007')]);

brush(d3.select(".brush"));

brush.event(d3.select(".brush"));

But how to do the same in v4?

Thanks,

Balint

[Mike Bostock]

Typically you’d use a scale to convert your data (your dates) to a pixel value:

selection.call(brush.move, [scale(start), scale(end)])

For example (using array.map to pass an array of data through a scale, but still the same technique): https://bl.ocks.org/mbostock/6232537

[Bálint Homoki]

Hi Mike,

Thanks for the quick response! Very much appreciated, and it's just one line and it works like a charm. Wow!

Yesterday I was also looking at the example you sent, before asking here, and honestly, I couldn't figure out the solution from that one. Now that I revisited it, it was all clear and obvious.

D3 is magic and I'm sure you've heard that before, many times. The examples are beautiful, and create very nice and informative visual representations of data. Some of them are true art.

Thank you,

Balint