使用d3.js调用相同点击事件的两个函数 [英] Calling two functions on same click event with d3.js

问题描述

有人知道是否可以使用d3.js在同一个事件上调用两个单独的函数？我知道你可以这样做在JavaScript中，只需用分号分隔这两个，但没有成功地做到这一点与我的特定情况。我使用一个力布局图与工具提示，并有两个单独的工具提示，我想使用。鼠标悬停时，会出现一个工具提示，显示节点的名称，然后单击，我想要第二个工具提示来显示其描述。在那次点击，我想第一个工具提示消失。这里是我使用的代码块：

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) 

我想和 describe_tip.show 一起调用 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.

推荐答案

可以包装要在匿名函数中进行的两个函数调用，例如

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

请注意，由于 describe_tip.show 和 tip.hide 都需要数据 d 作为参数，你需要传递给他们。回想一下，当将匿名回调函数传递给 .on（click，callback）时，D3会传递：

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:

当前数据d和当前索引i，此上下文作为当前DOM元素

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

到回调函数（ docs ）。

这篇关于使用d3.js调用相同点击事件的两个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！