title: Callbacks with D3
body: <p>I'm using the <a href="http://d3js.org/" rel="nofollow">D3</a> javascript library to dynamically change line thicknesses. What I want to achieve is a line that increase in thickness, and decreases in thickness, repeatedly constantly. To draw a line, I used the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;  
        &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;  
      &lt;div id="D3line"&gt;&lt;/div&gt;
              &lt;script type="text/javascript"&gt;
  
              var lineSVG = d3.select("#D3line")  
                  .append("svg:svg")
                  .attr("width", 500)  
                  .attr("height", 200);               
  
              var myLine = lineSVG.append("svg:line")
                  .attr("x1", 60)
                  .attr("y1", 60)
                  .attr("x2", 450)
                  .attr("y2", 150)
                  .style("stroke", "rgb(6,120,155)")
                  .style("stroke-opacity", 2);                
  
  
              &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then, to change the line stroke thickness, I used the following code:</p>
  
  <pre><code>var lines = lineSVG.selectAll("line")   // select all lines 
  
  function makeLinesThick()
  {
      lines.transition().duration(500)
      .style("stroke-width", "5")
      .each("end", makeLinesThin);
  }
  
  function makeLinesThin(){
      lines.transition().duration(500)
      .style("stroke-width", "2")
      .each("end", makeLinesThick);
  }
  
  // call function to change lines
  makeLinesThick()
  </code></pre>
  
  <p>However, I end up with this not running properly and getting an 'Unresponsive script' message in my browser. I'm not sure if I am structuring the callbacks properly in this case.</p>
  
  <p>Edit: I changed my incorrect callback handling by removing the <code>()</code> in the <code>.each()</code> line.</p>