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案例