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

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

• javascript
• svg
• d3.js

Share Improve this question Follow edited Jun 27, 2014 at 22:02 Roy asked Jun 27, 2014 at 21:57 RoyRoy 3311 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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