d3中'on'和'call'之间的区别

Question

我对 d3 中 call 和 on 参数之间的区别有疑问。

据我所知，

1) 'on' 论点

'selection' + 'on' 正在关注一个事件或动作。 例如，


d3.select().on('click', function)

或

transition().on('end', 函数)

以上参数被解释为

当 on() 中的某些事情发生时，在事件之后执行函数。

2)'call'参数

'selection'+'call' 参数正在使用信息在 svg 上绘制东西 在调用参数中指定。

例如，

d3.select().call(d3.axisBottom(x)) -> 在选择上绘制轴
或者 d3.select().call(brush) -> 在选区上画笔

但是！ 根据我的理解，我无法解释这个论点。

scatter.select(".brush").call(brush.move, null)

这是为了消除刷子一旦移动。 应该是这样的

select().on(brush.move, function(){eliminating or hide brush})

上面的代码是我的伪代码。

如果我对调用和 on 功能的理解有误，谁能纠正我？ 为什么我必须调用(brush.move, null) 来消除画笔？

我遇到这个问题的完整代码在以下链接中。 https://jsfiddle.net/soonk/4u6zL0dn/

Answer 1

如果您查看selection.call() 的 API 文档，您会注意到

scatter.select(".brush").call(brush.move, null)

基本上等价于

brush.move(scatter.select(".brush"), null)

使用.call(brush.move, null) 时，实际选择scatter.select(".brush") 作为第一个参数传递给brush.move()。前一个调用的第二个参数null 作为第二个参数传递给brush.move()。

查看brush.move() 的规范，您会发现（重点是我的）：

# brush.move(group, selection)

[…] 选择 必须定义为数字数组，或null 以清除画笔选择。

把这两个位放在一起就很容易理解为什么第一条语句是用来清除画笔选择的了。