如何在 D3 上创建具有默认大小的画笔？

Question

我无法理解 D3 4.0 上的画笔/范围如何工作。我希望创建一个可以沿着 svg 元素的 Y 轴拖动的画笔，并且我希望在页面加载时已经创建了画笔，我不希望用户必须沿着 g 元素拖动来创建它。（例如，此示例有一个在页面加载http://bl.ocks.org/raffazizzi/3691274 时创建的画笔）。

这是我到目前为止：

var verticalRectangle = d3.select(".svgrectangle")
    .attr("width", 100)
    .attr("height", 500)
  .append("g")

var yBrush = d3.brushY()

verticalRectangle.append("g")
  .attr("class", "brush")
  .call(yBrush);

现在这会创建一个矩形，我可以通过在其中拖动来创建画笔，我希望在加载时已经在矩形上创建画笔（在矩形的底部，宽度为 100，高度为 10）。我相信 Brush.extent() 可以用于此，但我不确定在这种情况下正确的论点是什么。许多示例使用 D3 3.0 并使用带刻度的画笔，我认为 4.0 中不再需要这些。谢谢您的帮助。

Answer 1

我想出了怎么做。我必须在画笔上调用 move 并建立我希望我的选择包含的区域。例如 -

var verticalRectangle = d3.select(".svgrectangle")  
    .attr("width", 100)
    .attr("height", 500)
  .append("g")

var yBrush = d3.brushY()
  .extent([[0,0], [100,500]]) //Area you want your brush to be movable in
  .on("brush", brushed);

verticalRectangle.append("g")
  .attr("class", "brush")
  .call(yBrush)
  .call(yBrush.move, [5, 100]); //What area you want your brush selection to initially take