如何在 D3 上创建默认大小的画笔？答案

【问题标题】：How do I create a brush with default size on D3?如何在 D3 上创建默认大小的画笔？
【发布时间】：2016-07-19 17:21:53
【问题描述】：

我无法理解画笔/范围在 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 中不再需要这些，感谢您的帮助。

【问题讨论】：

当你说在加载时已经在矩形上创建画笔你是什么意思？所以就像而不是在投影样本的下方，它出现在它的顶部？
我的意思是你可以拖动的可见区域已经可见并且可以拖动了。例如，在我链接到画笔的示例中，画笔出现在图表的最左侧，用户无需先拖动并创建它。

标签： javascript d3.js svg

【解决方案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

【讨论】：