d3js:Brush v3 VS v4

V3版本

API

d3.svg.brush()

创建brush.默认x.y比例关联。extent 为空

brush(selection)

brush.x([scale])

获取或设置x关联比例

brush.y([scale])

获取或设置y关联比例

brush.entent([values])

获取或设置brush的范围

必须先关联比例才生效

brush.clamp([clamp])

获取或设置brush的夹选范围

brush.clear()

清空范围

brush.empty()

当且仅当选择刷的范围为空时，返回true；

当brush被创建时，被初始化为空；

当点击背景而不移动时，或者范围被清除，选择刷会变为空的；

如果选择刷有零宽度或零高度，它将被视为空；

当选择刷为空，则它的范围即视为未定义;

brush.on(type[, listener])

设置或获取指定类型 type 的监听器 listener ；选择刷支持三种类型事件：

brushstart - 鼠标按下时，即mousedown；

brush - 鼠标移动时，如果范围在改变，即mousemove；

brushend – 鼠标弹起/松开时，即mouseup；

需要注意，当鼠标在背景上点击时也会触发”brush”事件，因为选择刷范围会立刻被清除来开始一段新的范围。

brush.event(selection)

如果 selection 是选择器，立刻触发brush行为到注册的监听器，即三个事件序列：

brushstart, brush 和 brushend；

这是非常有用的，在设置完 brush extent 后来触发相应的事件；

当过渡开始于初始设置范围时触发brushstart ，

过渡进行期间每刻都会触发brush ，

过渡结束时触发brushend ；

需要注意，当用户开始刷时，即使过渡没结束也会被立刻终止(interrupted)

V4版本

改变

v4把多维的brush创建API分离了；.x 、 .y方法取消即关联比例尺需调用scale的方法。

API分为两种。一种brush的API。一种调用brush的API。。。。反正我是这么理解的。英文文档中并没有详细说明。通过Demo理解的结论

API

Brush的方法

d3.brush()

创建2维的brush.

d3.brushX()

创建x维的brush.

brush.brushY()

创建x维的brush.

brush.brushY()

创建x维的brush.

brush.extent([values] || function)

创建brush范围；

输出指定格式的function也可。

如果没有指定：(If extent is not specified）则使用d3的默认函数其返还svg的范围。但是svg要有width、height属性。使用css和viewBox设置SVG宽高时又偷懒会有惊喜

brush.handlesize([size])

设置拖选的宽度or高度；默认为6

并不是线宽为6；该属性可能是用于拉选是否容易的目的。

brush.on()

调用三个监听事件：

start:

brush:

end:

调用brush的方法

brush

使用

g.call(brush)

调用brush

brush.move

使用

g.call(brush.move,[[0,0],[width,height]])

设置初始的brush宽高

brush的事件

当调用刷事件侦听器时，d3.event设置为当前画刷事件。 事件对象公开了几个字段：

target - 关联的画笔行为。

type - 字符串“start”，“brush”或“end”; 见brush.on。

selection - 当前画笔选择。

sourceEvent - 底层输入事件，如mousemove或touchmove。

eg：在end事件的方法中使用d3.event.selection可以获取brush的范围；

brush.filter

并不知道是啥。。。。

过滤器～～返回0、1.默认实现为！event.button;

作用嘛。。。。准不准绘制。。。也是醉了

使用心得

1.设置brush的使用范围即v3的.background的rect；使用extent；

2.一维brush另一维度不填充；在brush的监听事件中设置

function brushs() {
d3.selectAll(".selection").attr("width",width - 100)
}

Demo

v4案例