Calling two functions on the same event with d3.js

Question

Does anyone know if it is possible to call two separate functions in the same event using d3.js? I know that you can do this in JavaScript by simply splitting them into two semicolons, but not doing this with my specific case. I use a power layout chart with tool tips and have two separate tool tips that I want to use. When you hover over the mouse, a tooltip appears with the name of the node name, and then when I click, I want the second tooltip to show its description. On this click, though, I would like the first tooltip to disappear. Here is the code block that I am using:

.on("click", describe_tip.show) .on("mouseover", tip.show) .on("mouseout", tip.hide) 

I want to call tip.hide along with describe_tip.show , but don’t know the correct syntax.

Any suggestions or help would be appreciated.

Answer 1

You can wrap two function calls that you want to make in an anonymous function, for example

 .on("click", function(d){ describe_tip.show(d); tip.hide(d); }) 

Note that since describe_tip.show and tip.hide both require d data as an argument, you need to pass them to them. Recall that when passing an anonymous .on("click", callback) callback function .on("click", callback) , D3 passes:

current datum d and current index i, and this context is the current DOM element

to the callback function ( docs ).