Question

我希望能够通过点击按钮重新执行D3动画。

这就是我尝试的方法，但它不起作用：

的index.html

相关代码行：

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

的script.js

这是JavaScript代码的摘录（请参阅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

我自己解决了以下问题：

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

如何在按钮单击时重新执行D3动画

1 个答案: