JSFiddle - React, Tailwind, and code Playground

by A B Jones

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <!-- Generated by graphviz version 2.38.0 (20140413.2041)
 -->
  <!-- Title: graphname Pages: 1 -->


  <svg width="708pt" height="305pt" viewBox="0.00 0.00 707.95 305.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 301)">
      <title>graphname</title>
      <polygon fill="white" stroke="none" points="-4,4 -4,-301 703.946,-301 703.946,4 -4,4" />
      <!-- 0 -->
      <g id="node1" class="node">
        <title>0</title>
        <ellipse fill="#b2dfee" stroke="#b2dfee" cx="456.946" cy="-192" rx="40.0939" ry="18" />
        <text text-anchor="middle" x="456.946" y="-188.3" font-family="Times New Roman,serif" font-size="14.00">Mumbai</text>
      </g>
      <!-- 1 -->
      <g id="node2" class="node">
        <title>1</title>
        <ellipse fill="#b2dfee" stroke="#b2dfee" cx="399.946" cy="-18" rx="46.5926" ry="18" />
        <text text-anchor="middle" x="399.946" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">Bangalore</text>
      </g>
      <!-- 0&#45;&gt;1 -->
      <g id="edge1" class="edge">
        <title>0&#45;&gt;1</title>
        <path fill="none" stroke="grey" d="M460.066,-163.558C462.067,-134.55 461.467,-88.3313 442.946,-54 438.559,-45.8673 431.415,-38.9123 424.2,-33.3953" />
        <polygon fill="grey" stroke="grey" points="456.557,-163.514 459.204,-173.773 463.532,-164.103 456.557,-163.514" />
        <text text-anchor="middle" x="509.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00"> BLR&#45;MUM&#45;440 </text>
      </g>
      <!-- 6 -->
      <g id="node7" class="node">
        <title>6</title>
        <ellipse fill="#b2dfee" stroke="#b2dfee" cx="339.946" cy="-105" rx="27" ry="18" />
        <text text-anchor="middle" x="339.946" y="-101.3"...

JavaScript

var edges = d3.selectAll('.edge');
edges.style('opacity', 1)
var indexAndEdge = [];
edges.each(function(d, i) {

  var thisEdgeCount = this.id.substring(4)
  indexAndEdge.push({ //push index you are at, the edge count worked out above and the id
    index: i,
    count: thisEdgeCount,
    id: this.id
  })
})

indexAndEdge.sort(function(a, b) {
  return a.count - b.count;
});


var count = 0; //set count to 0

function timer() {
  setTimeout(function(d) {
    if (count < indexAndEdge.length) { //if we havent gone through all edges
      d3.select('#' + indexAndEdge[count].id).transition().duration(200).style('opacity', 0).transition().duration(200).style('opacity', 1); //select current id from array
      count++; //increment count
      timer(); //call timer again
    } else {
    count =0 ;
    timer()
      console.log('end') //end
    }
  }, 500)
}
timer(); //call timer to show paths one by one


//add circle to each elipse 

var allEllipse = d3.selectAll('ellipse');
allEllipse.each(function(d) { //loop through ellipse's 
  var parentNodeX = this.attributes.cx.value,
    parentNodeY = this.attributes.cy.value; //set cx and cy

  d3.select(this.parentNode).append('circle')
    .attr('cx', parentNodeX) //thisParentBBox.left + thisParentBBox.width/2)
    .attr('cy', parentNodeY)
    .attr('r', 10).style('fill', 'red')
})