Wie D3-Animation auf Knopfdruck erneut auszuführen

Question

Ich möchte D3-Animation erneut ausführen können, indem Sie auf die Schaltfläche klicken. Diese

ist, wie ich es versucht, aber es funktioniert nicht:

index.html

Relevante Codezeilen:

<button class="button" onclick="reexecute()">Re-execute</button> 
<script type="text/javascript" src="script.js"></script> 

script.js

Dies ist der Auszug aus JavaScript-Code (siehe function reexecute() {..}

)

// 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); 
    } 
//... 

} 

Answer 1

Ich löste es selbst wie folgt:

d3.select('button').on('click',function(d,i){ 
    svg1.transition() 
      .duration(20000) 
      .ease("linear") 
      .tween("wt", tweenwt) 
      .each("end", enableInteraction); 
    });