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.

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.

• javascript
• d3.js
• onclick
• tooltip

1 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).