javascript - d3 : multiple tasks responding to one event

Question

鼠标悬停时，我希望绘制的路径改变颜色，并显示工具提示。我可以让他们每个人单独回应，但不能让他们同时回应。这是我的尝试:

train.append("path")
        .attr("d", function(d) { return line(d.coordinates); }) // d.coordinates is a list of coordinates
        .style("stroke-width", 1)
        .style("stroke", "black")
        .style("fill", "none")
        .on("mouseover", function () {
                d3.select(this)
                  .style("stroke", "red");

                tip.show;
            })
        .on("mouseout", function () {
                d3.select(this)
                        .style("stroke", "black");
                tip.hide;

            });

非常感谢您的建议!

Answer 1

您必须调用tip.show/tip.hide。确保从 .on 回调中传递数据 (d) 和索引 (i)。

.on("mouseover", function (d,i) {
  d3.select(this)
    .style("stroke", "red");
  tip.show(d, i); //<-- the parenthesis are calling the function
})
.on("mouseout", function () {
  d3.select(this)
    .style("stroke", "black");
  tip.hide(d, i);
});