How to have one event call multiple functions ? D3/Javascript

Question

I have these calls for when the mouse is over/off a node

    .on("mouseover", highlightImage)
    .on("mouseout", unhighlightImage)

    .on("mouseover", showTextToolTip)
    .on("mouseout", hideTextToolTip)

Now, as javascript is asynchronously read only the bottom two functions get called. I have looked around and found a few examples:

.on("mouseover", "highlightImage(); showTextToolTip()") //- doesnt work

.on("mouseover", mouseOverFunctions) //- calls a function>

function mouseOverFunctions(){
    showTextToolTip();
    highlightImage();
    } //- also doesnt work.

I gather this is because the 'mouseover' can only call one object at a time.

How can I call both functions at once ? I wish to show the text and highlight the node

added code

function showTextToolTip(d){
if(textButtonPressed==false){
d3.select(this).append("text")
    .attr("dx", "2")
    .attr("dy", "-24")
    .style("text-anchor", "start")
    .text(function(d) { return d.identifier; });
    showToolTip="true";
}}

function highlightImage(d){
    d3.select(this).classed("highlighted", true);
    highlightedNode = d.coreId;
    //console.log("Highlighted node : " + highlightedNode);
}

Lars Kotthoff · Accepted Answer · 2014-12-05 16:33:11Z

5

Define an anonymous function that calls them both:

.on("mouseover", function(d) {
  highlightImage(d);
  showTextToolTip(d);
});

and similarly for mouseout.

If you reference this in your handler functions, you need to use a different way of calling the functions to ensure that it is passed through properly:

.on("mouseover", function(d) {
  highlightImage.call(this, d);
  showTextToolTip.call(this, d);
});

edited Dec 5, 2014 at 16:33

answered Dec 5, 2014 at 15:57

Lars Kotthoff

110k16 gold badges210 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rekoDolph Over a year ago

TypeError: e.getAttribute is not a function ? :/ @lars kotthoff

rekoDolph Over a year ago

the javascript - d3.v3.min.js (line 1, col 3091)

Lars Kotthoff Over a year ago

Well something that you're calling from your code is causing it. Can you post the code for the two functions that are called please?

Lars Kotthoff Over a year ago

Right, in this case you need a different syntax. I'll update the answer.

Collectives™ on Stack Overflow

How to have one event call multiple functions ? D3/Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related