第十章 D3刷子 d3-brush

d3-brush

它也可以被用来放大选中的区域，或选择交叉过滤数据 或实时直方图:

d3.brush()创建一个二维的brush.

d3.brushX()创建一个一维的 x-方向的brush.

d3.brushY()创建一个一维的 y-方向的brush.

svg.append("g")
    .attr("class", "brush")
    .call(d3.brush().on("brush", brushed));

brush.move(group, selection)

为指定的group设置选中范围,
election为一个数值类型的数组. 对于. 对于二维 brush,必须由 [[x0, y0], [x1, y1]]定义, x0和 y0 表示最小x和y值, x1和y1 表示最大x和y值. 对于 x-brush, 一定由 [x0, x1]定义; 对于y-brush, 一定定义为 [y0, y1]. selection也可以是一个返回数组类型的方法. 如果是一个方法则会为每个选中的元素调用，并传递当前的数据 d和索引i,this表示当前的DOM元素节点.

brush.extent([extent])

如果 extent 指定，则设置可刷取的范围

brush.on(typenames, [listener])

• start - 开始brush操作，比如鼠标按下.
• brush -当拖动brush区域进行选取时，比如鼠标拖动.
• end - 在选取结束时，比如鼠标抬起.

d3.brushSelection(node)

返回指定节点的brush选择，在内部元素的brush或以 element.__brush形式存储; 但是你应该使用d3.brushSelection而不是通过直接访问内部存储来调用，如果给定的node没有附加brush操作，则返回null.
selection 被定义为一个数值数组.

• 对于二维 brush, 它是[[x0, y0], [x1, y1]]这种形式, x0 和y0 表示最小x和y值, x1和 y1 表示最大x和y值,
• 对于[x-brush], 表示为[x0, x1];
• 对于 [y-brush], 表示为[y0, y1].