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].