如何将比例应用于 d3 v4.0“画笔”

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。

v3 中的extent表示画笔区域，即画笔限定的整体区域内的选择范围。

v4 中的extent现在是指画笔限定的整体区域，而selection是所选区域，以前称为 extent 。（请注意，可以通过 d3.brushSelection 访问所选内容，但更常在 brush 事件处理程序中作为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） 设置所选区域，而是将 （v4） 所选区域move()为缩放像素范围。

Answer 2

取而代之的是：

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

这样做是因为你想要一个 Y 维画笔：

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