阅读数:71 评论数:0

刷取交互指在一维或二维空间内使用手势,比如点击然后拖拽鼠标拾取一块区域范围的操作.刷取操作经常用来选取一些离散的元素,比如散点图中的点或者桌面上的文件等等.它也可以被用来对感兴趣的区域进行放大操作。

d3-brush模块的实现基于注册于SVG  上的鼠标和触摸操作. 点击并且拖拽选区会对选区进行位置调整。点击并且拖拽选区的 handles(把手) 会调整对应的选区的边。点击并且拖拽隐藏的 overlay 会创建一个新的选区，按住 META (⌘) 键并点击可刷取范围内的点也会达到这种效果. 按住ALT (⌥)并移动鼠标时会已鼠标刚开始按下的点为中心调整已选中区域的大小,调整已选中区域大小的过程中按住 SPACE 时会将调整大小变为调整已选中区间位置,刷取过程中按住 shift 会固定刷取的方向.

一、安装

npm install d3-brush

二、API

1、d3.brush

创建一个新的二维刷取交互

2、d3.brushX

创建一个新的一维的 x - 方向的刷取交互

3、d3.brushY

创建一个新的一维的 y - 方向的刷取交互

4、brush(group)

将刷取交互应用到指定的 group(分组元素)上, group 必须是一个 SVG，这个方法通常不直接调用，而是通过selection.call来使用。

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

5、brush.move(group,selection)

通过编程的方式实现对刷取范围的调整

6、brush.extent([extent])

设置或获取刷取操作的可刷取范围

7、brush.filter([filter])

如果过滤器返回假值,则忽略启动刷取的事件并且不进行刷取操作

8、brush.handleSize([size])

设置或获取调整刷取范围的把柄的大小

9、d3.brushSelection(node)

返回指定node的刷取区间