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 in v3表示刷毛区域，即刷子限定的整个区域内的选择范围。

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

如何将比例应用于d3 v4.0`brush`？

2 个答案: