CODEWITHSUNDEEP
javascriptd3.jssvg
LinAlg
LinAlg

Reputation: 1

d3: multiple tasks responding to one event

On mouseover, I'd like the path that I've drawn to change color, and a tooltip to show. I can have each one of them respond separately, but cannot have them respond at the same time. Here's my attempt:

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;

            });

Suggestions are highly appreciated!

Upvotes: 0

Views: 34

Answers (1)

Mark
Mark

Reputation: 108512

You have to call tip.show/tip.hide. Make sure to pass it the data (d) and index (i) from the .on callback.

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

Upvotes: 1

Related Questions