如何让一个事件调用多个功能？ 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);
}   

Answer 1

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);
});