将鼠标悬停在使用d3.js创建的条形图条上后,触发2个鼠标悬停事件?

时间:2014-02-26 10:10:51

标签: javascript css d3.js tooltip mouseover

在以下d3.js代码中:

    svg.selectAll(".bar")
            .data(data)
            .enter()
            .append("rect")
            .attr("transform", "translate(10,0)")
            .attr("class", "bar")
            .attr("x", function(d) { return x(d.thread_id); })
            .attr("width", x.rangeBand())
            .attr("y", function(d) { return y(+d.traffic); })
            .attr("height", function(d) { return height - y(+d.traffic); })
            .on('mouseover', tip.show)            // First time call to show a tooltip
            .on('mouseover', justChecking)        // Second time to call a Function
            .on('mouseout', tip.hide);

执行此代码时,仅显示第二个函数输出,但工具提示消失。

我想在鼠标悬停时调用它们,即调用该函数以及显示工具提示。有什么想法值得赞赏?

1 个答案:

答案 0 :(得分:2)

您附加的任何事件处理程序都会覆盖以前连接的事件处理程序。但是,您可以在同一个处理程序中调用两个函数:

.on('mouseover', function(d, i) {
  tip.show(d, i);
  justChecking(d, i);
})