mouse over event line path d3

Question

I created a multi line graph by d3.

I'm trying to create a handler for each line (path) but it doesn't work.

Here is the code creating the path:

var line2 = d3.svg.line()
            .x(function(d, i){return x(AXValues[i])})
            .y(function(d, i){return y(AYValues[i])}); 

p2 = svg.append("path")
                .datum(ArticleData)
                .transition()
                .delay(1100)
                .attr("id", "p"+i)
                .attr("class", "p"+i)
                .attr("d", line2(AXValues, AYValues))
                .style("stroke", "Brown")
                .style("stroke-width", 2)
                .style("fill", "none");

Im trying to do something like this:

.on("mouseover", this.style("stroke-width", 5));

Answer 1

You'll need to attach the listener to the appended object:

p2.on("mouseover", function () {
    d3.select(this).style("stroke-width", 5);
});

Thanks to @Lars Kotthoff for the correction

Answer 2

You can do this through css with the 'hover' event, for instance for the p2 class you are applying you can have some css that looks like this.

p2:hover {
 stroke-width: 5;
}

hovering over would change the stroke-width to 5, and once the hover event is over the element will go back to its original stroke-width