Calling two functions on same click event with d3.

Question

Does anybody know if it is possible to call two separate functions on the same event with d3.js? I know you can do this in JavaScript by just separating the two with a semicolon but have not been successful doing this with my particular case. I am using a force-layout graph with tool-tips and have two separate tool-tips that I want to use. On mouseover, a tool-tip appears saying the name of the node and then on click, I want a second tool-tip to show its description. On that click though, I would like for the first tool tip to go away. Here is the block of code 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 do not know the correct syntax.

Any suggestions or help would be appreciated.

Answer 1

You can wrap the two function calls you want to make in an anonymous function, e.g.

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

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

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

to the callback function (docs).