JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

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

  <div class="control-buttons">
    <button class="pause">
      Pause
    </button>
    <button class="continue">
      Continue
    </button>    
  </div>
  <svg width="1000" height="500">
    <line x1="100" y1="0" x2="100" y2="100" stroke="black"/>
  </svg>
</body>

<script>   
  // pause
  d3.select('button.pause').on('click', function() {
  	d3.select("line").interrupt();
  });
  
  d3.select('button.continue').on('click', function() {
   d3.select("line").transition()
      .ease(d3.easeLinear)
      .duration(10000)
      .attr("x1",800)
      .attr("x2",800);
  }).dispatch('click');
  
</script>
</html>