CODEWITHSUNDEEP
javascriptd3.jstransitiongeojson
user3471259
user3471259

Reputation: 225

D3 stop and restart transition along path to allow click through to geo data coordinates

Hi I’m trying to use D3 to pause and resume a transition of a marker along a path like this example D3 tween - pause and resume controls plus stop the marker's transition on a particular data point like this D3 transition along segments of path and pause at coordinate values. I am starting the transition by clicking on the marker and would like to be able to stop it and then restart it when it is clicked – at the moment it pauses for a period and then starts.

I’d like to be able to stop the marker completely so I can do something with the point ie click through to xlink:href for a particular clicked point based on its json data and so leave the page - and then return to the marker transition and resume the transition from the same point it stopped.

I think I need to pass the pauseValues into the transition function but just can’t understand how to do this.

This is my code: 

<!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: steelblue;
    stroke-width: 3px;
  }

  .point {
    fill: green;
  }

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

</style>

<body>

  <script>
    var width = 960,
      height = 500;

    var data = [
    [610.4199794444444, 243.7191682432953], //Paris
      [480, 200],
      [580, 400],
      [680, 100],
      [780, 300],
      [180, 300],
      [280, 100],
      [380, 400]
    ];

    var duration = 20000/data.length,
        pauseTime = 2000;

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

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

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

    //Want to activate circles when marker paused on them - intention is to have on click to href and stop marker while href is displayed
    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "point")
        .attr("r", 10)

        .attr("transform", function(d) {
            return "translate(" + d + ")";
      })

        .on('click', function(d, i) {
            d3.select(this)
              .style("fill", "pink")
              //sample - data will be for each point and based on the geojson in real example
              .append("a")
            .attr("xlink:href", "http://collections.anmm.gov.au/en/objects/details/11429/")

            pausePoints.push(i);
            console.log("pausePoints_push_i: " +pausePoints.push(i));
            console.log("pausePoints: " + pausePoints);
            if (pausePoints.length === 1)
            transition();    
        });


    var marker = svg.append("circle")
      .attr("r", 19)
      .attr("transform", "translate(" + (data[0]) + ")")
            .on('click', function(d, i) {
            d3.select(this)
              .style("fill", "pink")

                pausePoints.push(i);

                if (pausePoints.length === 1)
                setTimeout(function() {
                pauseValues.lastTime = pauseValues.currentTime;
              }, 100);
        transition();    
        });


    var pauseValues = {
      lastTime: 0,
      currentTime: 0
    };

    var pausePoints = [],
        iter = 0,
        transData = data.slice();

    function transition() {
      marker.transition()
        .ease(d3.easeLinear)
       .duration(duration - (duration * pauseValues.lastTime))
        .attrTween("transform", function(){
          var p0 = transData.shift(),
              p1 = transData[0];
              m = (p0[1] - p1[1]) / (p0[0] - p1[0]),
              b = p0[1] - (m * p0[0]),
              i = d3.interpolateNumber(p0[0], p1[0]);

            return function(t){
            //console.log("T: " +t);
              var x = i(t),
                  y = m*x + b;

              return "translate(" + x + "," + y + ")";
            }
        })
        .on("end", function(){
          if (transData.length <= 1) return;
          iter++;    
          setTimeout(transition, pausePoints.indexOf(iter) !== -1 ? pauseTime : 0);

        });
    };

  </script>
</body>

Upvotes: 0

Views: 1043

Answers (1)

Mark
Mark

Reputation: 108567

I helped you with your last question. From the code I wrote, you introduced this variable pauseValues, what is it intended to do? From what I can tell, it attempts to adjust the duration based on previous pauses; you only needed this when you were running one long transition across all the paths. My code runs each leg as a single transition. If you want to pause and resume on click here's a simple refactor:

<!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: steelblue;
      stroke-width: 3px;
    }
    
    .point {
      fill: green;
    }
    
    .line {
      fill: none;
      stroke: red;
      stroke-width: 4;
      stroke-dasharray: 4px, 8px;
    }
  </style>

  <body>

    <script>
      var width = 960,
        height = 500;

      var data = [
        [610.4199794444444, 243.7191682432953], //Paris
        [480, 200],
        [580, 400],
        [680, 100],
        [780, 300],
        [180, 300],
        [280, 100],
        [380, 400]
      ];

      var duration = 20000 / data.length,
        pauseTime = 2000;

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

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

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

      //Want to activate circles when marker paused on them - intention is to have on click to href and stop marker while href is displayed
      svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("class", "point")
        .attr("r", 10)

      .attr("transform", function(d) {
        return "translate(" + d + ")";
      })

      .on('click', function(d, i) {
        d3.select(this)
          .style("fill", "pink")
          //sample - data will be for each point and based on the geojson in real example
          .append("a")
          .attr("xlink:href", "http://collections.anmm.gov.au/en/objects/details/11429/")

        pausePoints.push(i);

        if (pausePoints.length === 1)
          transition();
      });


      var marker = svg.append("circle")
        .attr("r", 19)
        .attr("transform", "translate(" + (data[0]) + ")")
        .on('click', function(d, i) {
            transition();
        });

      var pausePoints = [],
        iter = 0;
        transData = data.slice();

      function transition() {
        marker.transition()
          .ease(d3.easeLinear)
          .duration(duration)
          .attrTween("transform", function() {
            var p0 = transData.shift(),
              p1 = transData[0],
              m = (p0[1] - p1[1]) / (p0[0] - p1[0]),
              b = p0[1] - (m * p0[0]),
              interp = d3.interpolateNumber(p0[0], p1[0]);

            return function(t) {

              var x = interp(t),
                y = m * x + b;

              return "translate(" + x + "," + y + ")";
            }
          })
          .on("end", function() {
            iter++;
            if (
              transData.length <= 1 || // out of points
              pausePoints.indexOf(iter) !== -1) // on a clicked point
            {
              return;
            }
            transition();
          });
      };
    </script>
  </body>

Upvotes: 1

Related Questions