Come si applica una scala a un `pennello` d3 v4.0?

Question

In d3 3.x, mi sarebbe tipicamente definire e impostare un pennello con codice come questo:

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, non vedo una funzione corrispondente per associare una scala alla spazzola. Senza una scala, non capisco come specifichi l'intervallo generale del pennello.

Answer 1

Il significato di extent è cambiato da v3 a v4.

extent in v3 significava l'area spazzolata, ovvero l'intervallo di selezione all'interno dell'area complessiva circoscritta dal pennello.

extent in v4 ora si riferisce all'area complessiva circoscritta dal pennello, mentre lo selection è l'area selezionata, quello che in precedenza era denominato extent. (Si noti che la selezione è accessibile tramite d3.brushSelection, ma è più comunemente accessibile come d3.event.selection in un gestore di eventi spazzola

Inoltre d3.v4, scale non sono più associati direttamente con spazzole,., Invece, una spazzola funziona solo .. su un'area di pixel scale devono essere applicate sulla strada (e impostazione pennello) e sulla via d'uscita (per i valori restituiti da gestori di eventi pennello) Quindi quello che era in precedenza, in d3.v3:

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

in d3.v4 diventa qualcosa del tipo:

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)]);

Si noti che invece di impostare l'area selezionata con extent (v3), abbiamo move() (v4) l'area selezionata su un intervallo di pixel in scala.

Answer 2

Invece di questo:

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

fare questo in quanto si vuole un pennello quota Y:

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