Question

我希望使用D3过渡来停止和重新启动动画文本以及沿路径的圆的帮助。我想复制Haiyan typhoon example，但能够暂停并重新启动它。

我已经使用this example进行暂停和重新开始，但是无法弄清楚如何使文本成为动画，或者停止并从圆圈动画开始。

我的代码是here

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>

<style type="text/css">
  body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    color: red;
  }

  button {
    position: absolute;
    top: 15px;
    left: 10px;
    background: #004276;
    padding-right: 26px;
    border-radius: 2px;
    cursor: pointer;
  }

  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="utf-8">

    <script src="https://d3js.org/d3.v4.min.js"></script>

  <style type="text/css">
    body {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      color: red;
    }


    circle {
      fill: steelblue;
      stroke-width: 3px;
    }

    .line {
      fill: none;
      stroke: red;
      stroke-width: 4;
      stroke-dasharray: 4px, 8px;
    }

</style>

<body>

  <button>Start</button>

  <script>
    var w = 960,
      h = 500;

    var duration = 10000;

    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h);

    var line = d3.line()
      .x(function(d) {
        return (d)[0];
      })
      .y(function(d) {
        return (d)[1];
      });

var i= 0;
    var data = [
      [480, 200],
      [580, 400],
      [680, 100],
      [780, 300],
      [180, 300],
      [280, 100],
      [380, 400]
    ];

    //path to animate
    var linepath = svg.append("path")
      .data([data])
      .attr("d", line)
      .attr('class', 'line')
      .attr("d", function(d) {
        return line(d)
      });

    var points = svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("r", 7)
      .attr("transform", function(d) {
        return "translate(" + (d) + ")";
      })
      .attr("class", "point");

  var dataText = svg.append("text")
    .text(function(d){return data[0]})
    .attr("x", 60)
    .attr("y", 60)
    .style("text-anchor","end");

    var pauseValues = {
      lastTime: 0,
      currentTime: 0
    };
    var marker = svg.append("circle")
      .attr("r", 19)
      .attr("transform", "translate(" + (data[0]) + ")")


    function transition() {
      marker.transition()
        .duration(duration - (duration * pauseValues.lastTime))
        .attrTween("transform", translateAlong(linepath.node()))
        .on("end", function() {
          pauseValues = {
            lastT: 0,
            currentT: 0
          };
          transition()
        });
    }

    function translateAlong(path) {
      var l = path.getTotalLength();
      return function(d, i, a) {
        return function(t) {
          t += pauseValues.lastTime;
          var p = path.getPointAtLength(t * l);
          console.log(p)
          pauseValues.currentTime = t;
          return "translate(" + p.x + "," + p.y + ")";
        };
      };
    }

    d3.select('button').on('click', function(d, i) {
      var self = d3.select(this);
      if (self.text() == "Pause") {
        self.text('Start');
        marker.transition()
          .duration(0);

//need text data to change as transition runs
        dataText.transition()
          .text(data[i])

          i=i+1;

        setTimeout(function() {
          pauseValues.lastTime = pauseValues.currentTime;
        }, 100);
      } else {
        self.text('Pause');
        transition();
      }
    });

  </script>
</body>

我希望看到文本随着动画的进行而在数据中移动。

D3如何使用暂停为动画设置文本并开始过渡

0 个答案: