Animating path in .svg file using d3.js

Question

I have .svg file

<?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" font-family="Times New Roman,serif" font-size="14.00">Goa</text>
</g>
<!-- 0&#45;&gt;6 -->
<g id="edge6" class="edge"><title>0&#45;&gt;6</title>
<path fill="none" stroke="grey" d="M406.617,-188.92C382.78,-185.106 356.24,-176.165 340.946,-156 333.916,-146.73 333.971,-133.465 335.621,-122.928"/>
<polygon fill="grey" stroke="grey" points="406.251,-192.402 416.627,-190.258 407.179,-185.464 406.251,-192.402"/>
<text text-anchor="middle" x="391.946" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> GOA&#45;MUM&#45;108 </text>
</g>
<!-- 2 -->
<g id="node3" class="node"><title>2</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="118.946" cy="-105" rx="37.0935" ry="18"/>
<text text-anchor="middle" x="118.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00">Cochin</text>
</g>
<!-- 3 -->
<g id="node4" class="node"><title>3</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="118.946" cy="-192" rx="32.4942" ry="18"/>
<text text-anchor="middle" x="118.946" y="-188.3" font-family="Times New Roman,serif" font-size="14.00">Jaipur</text>
</g>
<!-- 3&#45;&gt;2 -->
<g id="edge8" class="edge"><title>3&#45;&gt;2</title>
<path fill="none" stroke="grey" d="M118.946,-163.734C118.946,-150.419 118.946,-134.806 118.946,-123.175"/>
<polygon fill="grey" stroke="grey" points="115.446,-163.799 118.946,-173.799 122.446,-163.799 115.446,-163.799"/>
<text text-anchor="middle" x="162.446" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> COC&#45;JAI&#45;983 </text>
</g>
<!-- 3&#45;&gt;6 -->
<g id="edge5" class="edge"><title>3&#45;&gt;6</title>
<path fill="none" stroke="grey" d="M154.314,-176.995C170.385,-170.615 189.636,-162.951 206.946,-156 223.413,-149.388 227.386,-147.373 243.946,-141 268.615,-131.506 297.089,-121.207 316.581,-114.256"/>
<polygon fill="grey" stroke="grey" points="152.768,-173.843 144.763,-180.784 155.349,-180.35 152.768,-173.843"/>
<text text-anchor="middle" x="287.946" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> GOA&#45;JAI&#45;884 </text>
</g>
<!-- 4 -->
<g id="node5" class="node"><title>4</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="40.9464" cy="-279" rx="40.8928" ry="18"/>
<text text-anchor="middle" x="40.9464" y="-275.3" font-family="Times New Roman,serif" font-size="14.00">Kolkatta</text>
</g>
<!-- 4&#45;&gt;1 -->
<g id="edge3" class="edge"><title>4&#45;&gt;1</title>
<path fill="none" stroke="grey" d="M29.5176,-251.287C19.1406,-222.958 7.48741,-177.368 21.9464,-141 34.1426,-110.324 44.1274,-103.101 72.9464,-87 163.431,-36.4467 286.981,-23.3374 353.307,-20.029"/>
<polygon fill="grey" stroke="grey" points="26.3613,-252.829 33.2323,-260.894 32.8903,-250.305 26.3613,-252.829"/>
<text text-anchor="middle" x="68.4464" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> BLR&#45;KOL&#45;228 </text>
</g>
<!-- 4&#45;&gt;3 -->
<g id="edge7" class="edge"><title>4&#45;&gt;3</title>
<path fill="none" stroke="grey" d="M62.7013,-254.293C76.1886,-239.595 93.1216,-221.142 104.866,-208.344"/>
<polygon fill="grey" stroke="grey" points="59.8,-252.278 55.6176,-262.012 64.9576,-257.011 59.8,-252.278"/>
<text text-anchor="middle" x="127.446" y="-231.8" font-family="Times New Roman,serif" font-size="14.00"> JAI&#45;KOL&#45;743 </text>
</g>
<!-- 5 -->
<g id="node6" class="node"><title>5</title>
<ellipse fill="#b2dfee" stroke="#b2dfee" cx="522.946" cy="-279" rx="29.4969" ry="18"/>
<text text-anchor="middle" x="522.946" y="-275.3" font-family="Times New Roman,serif" font-size="14.00">Delhi</text>
</g>
<!-- 5&#45;&gt;0 -->
<g id="edge4" class="edge"><title>5&#45;&gt;0</title>
<path fill="none" stroke="grey" d="M492.042,-261.717C484.599,-256.574 477.27,-250.295 471.946,-243 464.895,-233.337 461.127,-220.345 459.132,-210.027"/>
<polygon fill="grey" stroke="grey" points="490.4,-264.82 500.718,-267.226 494.152,-258.911 490.4,-264.82"/>
<text text-anchor="middle" x="520.446" y="-231.8" font-family="Times New Roman,serif" font-size="14.00"> MUM&#45;DEL&#45;340 </text>
</g>
<!-- 5&#45;&gt;1 -->
<g id="edge9" class="edge"><title>5&#45;&gt;1</title>
<path fill="none" stroke="grey" d="M553.607,-261.01C559.788,-256.059 565.453,-250.047 568.946,-243 587.287,-205.999 727.222,-322.519 562.946,-87 535.932,-48.2704 482.434,-31.5297 444.09,-24.3379"/>
<polygon fill="grey" stroke="grey" points="551.149,-258.463 545.015,-267.101 555.197,-264.173 551.149,-258.463"/>
<text text-anchor="middle" x="654.446" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> BLR&#45;DEL&#45;270 </text>
</g>
<!-- 6&#45;&gt;1 -->
<g id="edge2" class="edge"><title>6&#45;&gt;1</title>
<path fill="none" stroke="grey" d="M340.326,-76.4424C341.465,-68.7133 343.716,-60.6211 347.946,-54 353.629,-45.1046 362.471,-37.9253 371.263,-32.4387"/>
<polygon fill="grey" stroke="grey" points="336.824,-76.3034 339.381,-86.5849 343.794,-76.9527 336.824,-76.3034"/>
<text text-anchor="middle" x="395.446" y="-57.8" font-family="Times New Roman,serif" font-size="14.00"> BLR&#45;GOA&#45;432 </text>
</g>
</g>

</svg>

i want to

1) blink the path in specific order according to edge number in js

2)Add small circle to each ellipse in js ...how to do it?

I was trying to do it by d3... but i'm not able to access to path in svg file

1)When do you want to blink them? 2) where do you want to add the circle? inside the ellipse? border of the ellipse? — eko, May 13 '16 at 09:11
hey...i want to blink the edges in specific order(order can be edge 1,6,8,7,2,5,4,3,8) and suppose we are blinking 7th edge joining 2nd(BLR) and 5th node(KOLKATTA) ,then while blinking the 7th edge i want to increase the count number on the smaller circle added to KOLKATTA ellipse node. — shivali, May 15 '16 at 08:05

thatOneGuy · Accepted Answer · 2016-05-13T10:50:09.277

To make the paths flash one by one first you have to set all the path's opacity to 0 (so you can increase them one by one), sort them and then select each one in order so you can increase the opacity back up to 1.

First I selected all edges containers and set the opacity to 0 :

var edges = d3.selectAll('.edge');
edges.style('opacity', 0)

Then go through each of these and populate an array. I populated an array with the index you were at, the count of the edge (worked out in the following function) and the id (so we can select).

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
  })
})

Now, time to sort this array based on the count :

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

Now to have a timer show them one by one :

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(500).style('opacity', 1); //select current id from array
      count++; //increment count
      timer(); //call timer again
    } else {
    console.log('end') //end
    }
  }, 500)
}
timer(); //call timer to show paths one by one

Now thats done. To put circles on the elipses. First select all ellipse's, get the parent (as you can't append circles to ellipse), append a circle at the ellipse's cx and cy :

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')
})

There you go. Finished fiddle : https://jsfiddle.net/thatOneGuy/t5xah84d/2/

EDIT.

Realised you wanted them to blink, just change the timer button transition from this :

d3.select('#' + indexAndEdge[count].id).transition().duration(500).style('opacity', 0)

To this :

 d3.select('#' + indexAndEdge[count].id).transition().duration(200).style('opacity', 0).transition().duration(200).style('opacity', 1);

And remove the line at the beginning which sets all opacity to 0.

And if you want it to go on for ever, just add count = 0; in the else statement. Updated fiddle : https://jsfiddle.net/thatOneGuy/t5xah84d/5/

EDIT 2 :

If you just want the path to blink, just edit the selection in the timer function :

d3.select('#' + indexAndEdge[count].id + ' path')

Final updated fiddle : https://jsfiddle.net/thatOneGuy/t5xah84d/7/

Instead of the opacity, if you want to change the colour : https://jsfiddle.net/thatOneGuy/t5xah84d/9/

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')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<?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" font-family="Times New Roman,serif" font-size="14.00">Goa</text>
      </g>
      <!-- 0&#45;&gt;6 -->
      <g id="edge6" class="edge">
        <title>0&#45;&gt;6</title>
        <path fill="none" stroke="grey" d="M406.617,-188.92C382.78,-185.106 356.24,-176.165 340.946,-156 333.916,-146.73 333.971,-133.465 335.621,-122.928" />
        <polygon fill="grey" stroke="grey" points="406.251,-192.402 416.627,-190.258 407.179,-185.464 406.251,-192.402" />
        <text text-anchor="middle" x="391.946" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> GOA&#45;MUM&#45;108 </text>
      </g>
      <!-- 2 -->
      <g id="node3" class="node">
        <title>2</title>
        <ellipse fill="#b2dfee" stroke="#b2dfee" cx="118.946" cy="-105" rx="37.0935" ry="18" />
        <text text-anchor="middle" x="118.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00">Cochin</text>
      </g>
      <!-- 3 -->
      <g id="node4" class="node">
        <title>3</title>
        <ellipse fill="#b2dfee" stroke="#b2dfee" cx="118.946" cy="-192" rx="32.4942" ry="18" />
        <text text-anchor="middle" x="118.946" y="-188.3" font-family="Times New Roman,serif" font-size="14.00">Jaipur</text>
      </g>
      <!-- 3&#45;&gt;2 -->
      <g id="edge8" class="edge">
        <title>3&#45;&gt;2</title>
        <path fill="none" stroke="grey" d="M118.946,-163.734C118.946,-150.419 118.946,-134.806 118.946,-123.175" />
        <polygon fill="grey" stroke="grey" points="115.446,-163.799 118.946,-173.799 122.446,-163.799 115.446,-163.799" />
        <text text-anchor="middle" x="162.446" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> COC&#45;JAI&#45;983 </text>
      </g>
      <!-- 3&#45;&gt;6 -->
      <g id="edge5" class="edge">
        <title>3&#45;&gt;6</title>
        <path fill="none" stroke="grey" d="M154.314,-176.995C170.385,-170.615 189.636,-162.951 206.946,-156 223.413,-149.388 227.386,-147.373 243.946,-141 268.615,-131.506 297.089,-121.207 316.581,-114.256" />
        <polygon fill="grey" stroke="grey" points="152.768,-173.843 144.763,-180.784 155.349,-180.35 152.768,-173.843" />
        <text text-anchor="middle" x="287.946" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> GOA&#45;JAI&#45;884 </text>
      </g>
      <!-- 4 -->
      <g id="node5" class="node">
        <title>4</title>
        <ellipse fill="#b2dfee" stroke="#b2dfee" cx="40.9464" cy="-279" rx="40.8928" ry="18" />
        <text text-anchor="middle" x="40.9464" y="-275.3" font-family="Times New Roman,serif" font-size="14.00">Kolkatta</text>
      </g>
      <!-- 4&#45;&gt;1 -->
      <g id="edge3" class="edge">
        <title>4&#45;&gt;1</title>
        <path fill="none" stroke="grey" d="M29.5176,-251.287C19.1406,-222.958 7.48741,-177.368 21.9464,-141 34.1426,-110.324 44.1274,-103.101 72.9464,-87 163.431,-36.4467 286.981,-23.3374 353.307,-20.029" />
        <polygon fill="grey" stroke="grey" points="26.3613,-252.829 33.2323,-260.894 32.8903,-250.305 26.3613,-252.829" />
        <text text-anchor="middle" x="68.4464" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> BLR&#45;KOL&#45;228 </text>
      </g>
      <!-- 4&#45;&gt;3 -->
      <g id="edge7" class="edge">
        <title>4&#45;&gt;3</title>
        <path fill="none" stroke="grey" d="M62.7013,-254.293C76.1886,-239.595 93.1216,-221.142 104.866,-208.344" />
        <polygon fill="grey" stroke="grey" points="59.8,-252.278 55.6176,-262.012 64.9576,-257.011 59.8,-252.278" />
        <text text-anchor="middle" x="127.446" y="-231.8" font-family="Times New Roman,serif" font-size="14.00"> JAI&#45;KOL&#45;743 </text>
      </g>
      <!-- 5 -->
      <g id="node6" class="node">
        <title>5</title>
        <ellipse fill="#b2dfee" stroke="#b2dfee" cx="522.946" cy="-279" rx="29.4969" ry="18" />
        <text text-anchor="middle" x="522.946" y="-275.3" font-family="Times New Roman,serif" font-size="14.00">Delhi</text>
      </g>
      <!-- 5&#45;&gt;0 -->
      <g id="edge4" class="edge">
        <title>5&#45;&gt;0</title>
        <path fill="none" stroke="grey" d="M492.042,-261.717C484.599,-256.574 477.27,-250.295 471.946,-243 464.895,-233.337 461.127,-220.345 459.132,-210.027" />
        <polygon fill="grey" stroke="grey" points="490.4,-264.82 500.718,-267.226 494.152,-258.911 490.4,-264.82" />
        <text text-anchor="middle" x="520.446" y="-231.8" font-family="Times New Roman,serif" font-size="14.00"> MUM&#45;DEL&#45;340 </text>
      </g>
      <!-- 5&#45;&gt;1 -->
      <g id="edge9" class="edge">
        <title>5&#45;&gt;1</title>
        <path fill="none" stroke="grey" d="M553.607,-261.01C559.788,-256.059 565.453,-250.047 568.946,-243 587.287,-205.999 727.222,-322.519 562.946,-87 535.932,-48.2704 482.434,-31.5297 444.09,-24.3379" />
        <polygon fill="grey" stroke="grey" points="551.149,-258.463 545.015,-267.101 555.197,-264.173 551.149,-258.463" />
        <text text-anchor="middle" x="654.446" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"> BLR&#45;DEL&#45;270 </text>
      </g>
      <!-- 6&#45;&gt;1 -->
      <g id="edge2" class="edge">
        <title>6&#45;&gt;1</title>
        <path fill="none" stroke="grey" d="M340.326,-76.4424C341.465,-68.7133 343.716,-60.6211 347.946,-54 353.629,-45.1046 362.471,-37.9253 371.263,-32.4387" />
        <polygon fill="grey" stroke="grey" points="336.824,-76.3034 339.381,-86.5849 343.794,-76.9527 336.824,-76.3034" />
        <text text-anchor="middle" x="395.446" y="-57.8" font-family="Times New Roman,serif" font-size="14.00"> BLR&#45;GOA&#45;432 </text>
      </g>
    </g>

  </svg>

not sure where you wanted the circles exactly, but surely you can make the changes needed to this :) If not, let me know what you need :) — thatOneGuy, May 13 '16 at 10:00
Hey, thanks a lot...i want to increase the blink time and while blinking it should change color like grey red alternatively.... and circles should be at the corner of ellipse...and have to add number to that circle according the sequence in which nodes got visited...what changes i should make? — shivali, May 13 '16 at 10:42
The blink time, the duration inside the timer() function is how fast it blinks, the number at the end of the setTimeout(), i.e the 500, is how fast it loops through each edge. As for the colour change just add .style('stroke''red') after the first transition and add .style('stroke','grey') after the second. Will update answer — thatOneGuy, May 13 '16 at 10:46
Added another fiddle to the answer. Just play with the timer function. And the functions inside the timer function. Specifically line 25, this is the line that adjusts the styles of the lines. Does this solve all your problems ? — thatOneGuy, May 13 '16 at 10:50
Hey,thanks...got fix for blinking...for adding text to the circle what shud i do? — shivali, May 13 '16 at 11:02
Thats a different question. Look at this question http://stackoverflow.com/questions/13615381/d3-add-text-to-circle — thatOneGuy, May 13 '16 at 11:05
Or just see what i have implemented : https://jsfiddle.net/thatOneGuy/t5xah84d/10/ — thatOneGuy, May 13 '16 at 11:06
Hey,when i'm blinking edge i want to fade out other graph also...can you tell what should i do? — shivali, May 13 '16 at 11:09
Blinking is resolved...but adding circle at corner of ellipse and adding number to that according to the way it got visited is not yet done.. — shivali, May 13 '16 at 11:10
What do you mean fade out other graph ? And you didnt ask for the circle at the corner of the ellipse, you just said on the ellipse. All these new questions are easy if you understood what I have written in the answer. If you want the circle in the corner of the ellipse just adjust the circles cx and cy value. As for fading out the rest of the graph just select the rest of the graph and adjust the opacity. Please dont be one of them that gets people to do everything for them. Use some initiative and learn it all for yourself. — thatOneGuy, May 13 '16 at 11:13

Animating path in .svg file using d3.js

1 Answers1