如何让一个事件调用多个函数?D3/Javascript

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

本文关键字：函数 D3 Javascript 调用 一个 事件      更新时间：2023-09-26

当鼠标超过/离开节点时，我有这些调用

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

现在，由于javascript是异步读取的，因此只调用了底部的两个函数。我环顾四周，发现了几个例子：

.on("mouseover", "highlightImage(); showTextToolTip()") //- doesnt work
.on("mouseover", mouseOverFunctions) //- calls a function>
function mouseOverFunctions(){
    showTextToolTip();
    highlightImage();
    } //- also doesnt work.

我认为这是因为"鼠标悬停"一次只能调用一个对象。

如何同时调用两个函数？我希望显示文本并突出显示节点

添加的代码

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

定义一个匿名函数来调用它们：

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

同样适用于mouseout.

如果在处理程序函数中引用this，则需要使用不同的方法来调用函数以确保正确传递：

.on("mouseover", function(d) {
  highlightImage.call(this, d);
  showTextToolTip.call(this, d);
});
相关文章：