Kristian Kristian - 7 months ago 45
Javascript Question

How do I animate the thickness of a stroke in D3.js?

i've successfully added transitions to my circles in a node graph, but i'm now trying to animate the mouseover of the connective line.

here's what I've tried:

//define the lines:
var edges = svg.selectAll("line")
.style("stroke", "#ccc")
.style("stroke-width", 1)
.on("mouseover", lineMouseover)
.on("mouseout", lineMouseout);

//the callback functions for mouseover / mouseout
function lineMouseover() {"line")
.style("stroke-width", 3);
function lineMouseout() {"line")
.style("stroke-width", 1);

Nothing seems to happen at all when i mouse over the lines. so, either i'm capturing the line incorrectly, or the attributes i'm animating are the wrong attributes.

any insight into what I'm doing wrong here?


In your code, the thiscontext in the lineMouseOverand lineMouseOut functions is the line element. You could simply use select each line and set its attributes. I wrote a small fiddle

   .attr('d', function(d) { return line(d.p); })
   .attr('stroke-width', function(d) { return d.w; })
   .attr('stroke', function(d) { return d.c; })
   .on('mouseover', mOver)
   .on('mouseout', function(d) {
           .style('stroke-width', d.w);

function mOver(d) {
        .style('stroke-width', 6);