title: How to re-execute D3 animation on a button click
body: <p>I want to be able to re-execute D3 animation by clicking on the button.</p>
  
  <p>This is how I tried to to it, but it does not work:</p>
  
  <p><strong>index.html</strong></p>
  
  <p>Relevant lines of code:</p>
  
  <pre><code>&lt;button class="button" onclick="reexecute()"&gt;Re-execute&lt;/button&gt;
  &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>script.js</strong></p>
  
  <p>This is the extract from JavaScript code (see <code>function reexecute() {..}</code>)</p>
  
  <pre><code>// Load the data.
  d3.json("data.json", function(data1) {
  
    var bisect = d3.bisector(function(d) { return d[0]; });
  
    // Add a title.
    dot.append("title")
        .text(function(d) { return d.name; });
  
    // Add an overlay for the wt label.
    var box = label.node().getBBox();
  
    var overlay = svg1.append("rect")
          .attr("class", "overlay")
          .attr("x", box.x)
          .attr("y", box.y)
          .attr("width", box.width)
          .attr("height", box.height)
          .on("mouseover", enableInteraction);
  
    // Start a transition that interpolates the data based on wt.
    svg1.transition()
        .duration(20000)
        .ease("linear")
        .tween("wt", tweenwt)
        .each("end", enableInteraction);
  
    function reexecute() {
      svg1.transition()
            .duration(20000)
            .ease("linear")
            .tween("wt", tweenwt)
            .each("end", enableInteraction);
    }
  //...
  
  }
  </code></pre>