Kristian Kristian - 1 year ago 91
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?

Answer Source

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download