title: How do I animate the thickness of a stroke in D3.js?
body: <p>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.</p>
  
  <p>here's what I've tried:</p>
  
  <pre><code>//define the lines:
  var edges = svg.selectAll("line")
              .data(dataset.edges)
              .enter()
              .append("line")
              .style("stroke", "#ccc")
              .style("stroke-width", 1)
              .on("mouseover", lineMouseover)
              .on("mouseout", lineMouseout);
  
  //the callback functions for mouseover / mouseout
  function lineMouseover() {
      d3.select(this).select("line")
          .transition()
          .duration(100)
          .style("stroke-width", 3);
  }
  function lineMouseout() {
      d3.select(this).select("line")
          .transition()
          .duration(100)
          .style("stroke-width", 1);
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>any insight into what I'm doing wrong here?</p>