如何将比例应用于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)设置为缩放像素范围.