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

【问题标题】：Trigger 2 mouseover events after hovering on a Bar of Bar Chart created using d3.js?悬停在使用 d3.js 创建的条形图条上后触发 2 个鼠标悬停事件？
【发布时间】：2014-02-26 10:10:50
【问题描述】：

在以下 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);

当我执行此代码时，只显示第二个函数输出，但工具提示消失了。

我想在鼠标悬停时同时调用它们，即调用函数并显示工具提示。有什么想法值得赞赏吗？

【问题讨论】：

标签： javascript css d3.js tooltip mouseover

【解决方案1】：

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

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

【讨论】：

如果由于某种原因这对您不起作用，您可以add a "namespace" to the event，它只会覆盖具有相同事件类型和命名空间的其他事件处理程序。 .on("mouseover.tip", tip.show).on("mouseover.check", justChecking);