CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
BS100
BS100

Reputation: 873

Difference between 'on' and 'call' in d3

I have a question about difference between call & on argument in d3.

As far as I understood,

1) 'on' argument

'selection' + 'on' is focusing an event or action. For example,


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

or

transition().on('end', function)



above arguments are interpreted as

when something within on() happens, do function after the event.

2)'call' argument

'selection'+'call' argument is drawing things on svg using the information specified in call argument.

For example,

d3.select().call(d3.axisBottom(x)) -> draw axis on the selection
or d3.select().call(brush) -> draw brush on the selection



HOWEVER! I can't interprete this argument from my understanding.

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

which is for eliminating the brush once it's moved. It should be something like

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

The code above is my pseudo code.

Can anyone correct me if I understood the call and on function wrongly? And why do I have to call(brush.move, null) to eliminate brushes?

Full code where I came across this question is in the following link. https://jsfiddle.net/soonk/4u6zL0dn/

Upvotes: 1

Views: 123

Answers (1)

altocumulus
altocumulus

Reputation: 21578

If you look at the API docs for selection.call() you will notice that 

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

is basically equivalent to 

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

When using .call(brush.move, null) the actual selection scatter.select(".brush") is passed as the first argument to brush.move(). The second argument null of the former call gets passed as the second argument to brush.move().

Looking at the specification for brush.move() you will find (emphasis mine):

# brush.move(group, selection)

[…] The selection must be defined as an array of numbers, or null to clear the brush selection.

Putting these two bits together it is easy to understand why the first statement is used to clear the brush selection.

Upvotes: 2

Related Questions