使用d3.js在.svg文件中设置动画路径

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

Answer 1

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>