How to apply scale to d3 v4.0 brush?

Question

In d3 3.x I usually defined and set up a brush with this code:

 let brushScale = d3.scaleLinear() .clamp(true) .domain([0, 100]) .range([height, 0]); let brush = d3.brush() .brushY(brushScale) .extent([0, 10]); 

In d3 4.x , I do not see the corresponding function for binding the scale to the brush. Without scale, I don’t understand how I determine the overall range of the brush.

Answer 1

The extent value has changed from v3 to v4.

extent in v3 meant an area with a matte finish, i.e. a range of choice within the general area bounded by the brush.

extent in v4 now refers to the total area bounded by the brush, and selection is the selected area, which was previously called extent . (Note that the selection can be obtained using d3.brushSelection , but is most often used as d3.event.selection in the brush event handler.

Also, in d3.v4, scales are no longer directly related to brushes; instead, the brush only works on the pixel area. Scales should be applied along the path (for brush settings) and along the path (to values ​​returned by brush event handlers). So, what was earlier, in d3.v3:

let brush = d3.brush() .brushY(brushScale) .extent([0, 10]);

in d3.v4 becomes something like:

let brush = d3.brushY() .extent([[0, brushScale.range()[0]], [sliderWidth, brushScale.range()[1]]]); let brushSel = svg.append('g').call(brush); brush.move(brushSel, [sliderScale(0), sliderScale(10)]);

Note that instead of setting the extent (v3), we move() (v4) the selection to a range of scaled pixels.

Answer 2

Instead of this:

 let brush = d3.brush() .brushY(brushScale) .extent([0, 10]); 

do this since you want a brush of size Y:

 let brush = d3.brushY() .extent([0, 10]);