Как применить масштаб к d3 v4.0 `brush`?

Question

В d3 3.x Я обычно определяю и устанавливаю кисть с кодом, подобным этому:

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

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

В d3 4.x Я не вижу соответствующей функции для привязки масштаба к кисти. Без шкалы я не понимаю, как я определяю общий диапазон кисти.

Answer 1

Значение extent изменился с v3 на v4.

extent в v3 означает очищаемую область, то есть диапазон выбора в пределах общей области, описанной кистью.

extent в v4 теперь относится к общей площади, описанной кистью, в то время как selection является выбранной областью, что ранее называлось extent, (Обратите внимание, что выбор может быть доступен через d3.brushSelection, но чаще доступен как d3.event.selection в обработчике события кисти.

Кроме того, в d3.v4 весы больше не связаны непосредственно с кистями; вместо этого кисть работает только над областью пикселей. Шкалы должны быть применены при входе (при настройке кисти) и при выходе (к значениям, возвращаемым обработчиками событий кисти). Итак, что было ранее, в d3.v3:

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

в d3.v4 становится что-то вроде:

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

Обратите внимание, что вместо установки выбранной области с extent (v3), мы move() (v4) выделенная область в масштабированном диапазоне пикселей.

Answer 2

Вместо этого:

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

сделайте это, так как вам нужна кисть измерения Y:

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