D3相关- drag（拖动）

1、添加拖动方法

d3.selectAll('circle').call(d3.drag().on('start',function() {
    d3.select(this).attr('fill', 'red'); // 修改颜色
})
.on('drag', function() {
    // 获取并设定移动位置
    let {x, y} = d3.event;  
    d3.select(this).attr('cx', x).attr('cy', y);
})
.on('end',function() {
    d3.select(this).attr('fill', 'green')
})

2、解除某些图元的drag绑定

d3.selectAll('circle1').call(d3.drag().on('.drag', null))

该方法用于将circle中带有circle1类的图元取消drag拖动绑定
3、详解
(1) d3.drag():创建一个拖拽行为并返回自身，需要用selection.call()进行调用
即:d3.selectAll('circle').call(d3.drag())
(2) d3.drag().on():添加事件回调
start - 拖拽开始
drag - 拖拽中
end - 拖拽结束
(3) 在回调过程中返回当前拖拽对象信息，即d3.event
target - 相关联的drag behavior.
type - 字符串 “start”, “drag” 或 “end”; 参考 drag.on.
subject - 通过 drag.subject定义的subject.
x - subject 的 x-坐标; 参考 drag.container.
y - subject 的 y-坐标; 参考 drag.container.
dx - 与上一次拖拽相比 x-坐标 的变化.
dy - 与上一次拖拽相比 y-坐标 的变化.
identifier - 字符串 “mouse”, 或者表示 touch identifier的数字.
active - 当前活动的拖拽手势的数量(在start和end, 不包含这个).
sourceEvent - 底层原始事件比如 mousemove 或 touchmove.
(4) 关于容器的设定 d3.drag().container(Func)，用于指定容器，暂不清楚如何使用
(5) 关于过滤器的设定 d3.drag().filter(Func),用于指定过滤器，暂不清楚如何使用