d3.js中的褪色效果

Question

我使用D3.js为SVG文件中的路径制作动画。当我眨眼的路径时，我希望淡出SVG的其他部分。

如何实现它？

＆＃13;

＆＃13;

var edges = d3.selectAll('.edge');
var allEllipse = d3.selectAll('ellipse');
var allNodes = d3.selectAll('.node');
var ellipseSelected; 
var pathSelected;
var parentNodeX;
var parentNodeY;
var relationshipName;
var indexEdge;
var fromData;
var toData;
//flag =1 ,when we have both src and trg
var flag = 1;
var data = [
    {"seq":"6", "start":"Delhi", "end":"", "rel":"" , "rows":"700"},
    {"seq":"1", "start":"Mumbai", "end":"Bangalore", "rel":" BLR-MUM-440 ", "rows":"300"},
    {"seq":"2", "start":"Bangalore", "end":"Goa", "rel":" BLR-GOA-432 ", "rows":"11"},
    {"seq":"3", "start":"Goa", "end":"Jaipur", "rel":" GOA-JAI-884 ", "rows":"111"},
    {"seq":"4", "start":"Kolkatta", "end":"Bangalore", "rel":" BLR-KOL-228 ", "rows":"500"},
    {"seq":"5", "start":"Jaipur", "end":"Kolkatta", "rel":" JAI-KOL-743 ", "rows":"700"},
    {"seq":"6", "start":"Delhi", "end":"", "rel":"" , "rows":"999"}
];
debugger;

function ellipseAdd() {
    //console.log("ellipse added");
    debugger
    d3.select(ellipseSelected.parentNode) 
        .append("ellipse")
        .attr('cx', parentNodeX) //thisParentBBox.left + thisParentBBox.width/2)
        .attr('cy', parentNodeY)
        .attr("rx", 15)
        .attr("ry", 7)
        .attr("stroke-width", 2)
        .attr("stroke", "white")
        .style('fill', '#CE2029')
    d3.select(ellipseSelected.parentNode)
        .data([toData])
        .append("text")
        .attr('x', parentNodeX-10) //thisParentBBox.left + thisParentBBox.width/2)
        .attr('y', parentNodeY+4).text(0).style('fill','white')
        .attr("font-size", "8px")
        .transition()
        .duration(3000)
        .tween("text", function(d) {
            debugger
            var i = d3.interpolate(fromData, d),
                prec = (d + "").split("."),
                round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;
            debugger
            return function(t) {
                this.textContent = Math.round(i(t) * round) / round;
            };
        });
}

function blinker() {
    if(flag==0) {
        //for adding ellipse and text to it
        ellipseAdd();
        //	console.log("ellipse added done");
    } else {
        //blink 3 things\
        //ellipse
        ellipseAdd();
        //edgeTransition
        //console.log("ellipse added done now blinking"); 
        //console.log("blinkStartEdge" +indexEdge );
        d3.select('#' + indexAndEdge[indexEdge].id + ' path')
            .transition().style('stroke','grey').duration(300).style('opacity', 1)
            .transition().style('stroke','red').style('stroke-width', 2)
            .transition().duration(300).duration(300).style('opacity', 1)
            .transition().style('stroke','grey').duration(300).style('opacity', 1)
            .transition().style('stroke','red').style('stroke-width', 2)
            .transition().duration(300).duration(300).style('opacity', 1)
            .transition().style('stroke','grey').duration(300).style('opacity', 1)
            .transition().style('stroke','red').style('stroke-width', 2)
            .transition().duration(300).duration(300).style('opacity', 1)
            .transition().style('stroke','grey').style('stroke-width',1).duration(300).style('opacity', 1)
            .transition().style('stroke','yellow').style('stroke-width', 1); //select current id from array
    }
}

edges.style('opacity', 1);
var indexAndEdge = [];
var countOnNode = [];
edges.each(function(d, i) {
    // debugger
    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,
        //destination:String(this.childNodes[1].childNodes[0].nodeValue).split("->")[1],
        relation:this.childNodes[7].childNodes[0]
    })
});

d3.selectAll('.node').each(function(d, i) {
    //debugger;
    var thisNodeCount = this.id;
    countOnNode.push({ //push index you are at, the edge count worked out above and the id
        id : thisNodeCount,
        prevData : 0,
        incrementData : 0
    })
});

//debugger;
//for(var i=0 ; i< data.length ;i++)

var newCount = 0;

function timer() {
    setTimeout(function(d) {
        if (newCount < data.length) { //if we havent gone through all edges
            debugger
            if(data[newCount].end.length==0) {
                flag = 0;
                for(jj=0;jj<allNodes[0].length;jj++) {
                    //if sourseName matches
                    // debugger;
                    if(String(allNodes[0][jj].childNodes[5].childNodes[0].nodeValue)==data[newCount].start) {
                        //console.log("yesss");
                        ellipseSelected = d3.selectAll('.node')[0][jj].childNodes[3];
                        parentNodeX = ellipseSelected.attributes.cx.value-ellipseSelected.attributes.rx.value +(2*ellipseSelected.attributes.rx.value);
                        parentNodeY = ellipseSelected.attributes.cy.value-(ellipseSelected.attributes.ry.value/2); 
                        //send the data to interpolate
                        //match id and update prevData ,incrementData 
                        for(var l = 0; l < countOnNode.length; l++) {
                            if(countOnNode[l].id == d3.selectAll('.node')[0][jj].id) {
                                countOnNode[l].prevData = countOnNode[l].incrementData;
                                countOnNode[l].incrementData = data[newCount].rows;
                                fromData = countOnNode[l].prevData;
                                toData = countOnNode[l].incrementData;
                            }
                        }

                        blinker();
                    }
                }
                flag=1;
            } else {
                //check relation and targetNode
                //check target
                flag = 1;
                for(var j=0; j < allNodes[0].length; j++) {
                    if(String(allNodes[0][j].childNodes[5].childNodes[0].nodeValue)==data[newCount].end) {
                        ellipseSelected = d3.selectAll('.node')[0][j].childNodes[3];
                        parentNodeX = ellipseSelected.attributes.cx.value-ellipseSelected.attributes.rx.value +(2*ellipseSelected.attributes.rx.value);
                        parentNodeY =ellipseSelected.attributes.cy.value-(ellipseSelected.attributes.ry.value/2); 
                        for(var l = 0; l < countOnNode.length; l++) {
                            if(countOnNode[l].id == d3.selectAll('.node')[0][j].id) {
                                countOnNode[l].prevData = countOnNode[l].incrementData;
                                countOnNode[l].incrementData = data[newCount].rows;
                                fromData = countOnNode[l].prevData;
                                toData   = countOnNode[l].incrementData;
                            }
                        }
                        //set the edge by checking relation
                        for(var k=0; k < indexAndEdge.length; k++) {
                            //if(edges[0][k].childNodes[7].childNodes[0] == indexAndEdge)
                            if(data[newCount].rel == String(indexAndEdge[k].relation.nodeValue)) {
                                indexEdge = k;
                            }
                        }
                        blinker();
                        flag = 0;
                    }
                }
            }

            //allEllipse 

            newCount++;
            timer();
        } else {
            // count = 0;
            timer();
            // console.log('end') //end
        }
    }, 3000)
}

timer();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这里我通过D3.js处理SVG文件的元素，并将椭圆添加到SVG文件的节点。我按特定顺序闪烁SVG文件中的路径。当我眨眼的道路时，我想淡出其他部分。

Answer 1

您可以使用SVG过滤器。

创建过滤器

var filter = d3.select("svg").append("defs")
          .append("filter")
          .attr("id", "blur")
          .append("feGaussianBlur")
          .attr("stdDeviation", 1);

对所有元素应用过滤器，除了在blinker函数内的链接组和子元素。

function blinker(){
      ------------------
      ------------------
      d3.select("svg g.graph").selectAll("*").attr("filter","url(#blur)");
      d3.select('#' + indexAndEdge[indexEdge].id).attr("filter",undefined);
      d3.select('#' + indexAndEdge[indexEdge].id).selectAll("*").attr("filter",undefined);
      ------------------
      ------------------
}

眨眼过渡后

删除过滤器。

 .transition()
 .each("end",function(){
     d3.select(this).style('stroke', 'yellow').style('stroke-width', 1); //select current id from array
     d3.select("svg").selectAll("*").attr("filter",undefined);
  });

代码段：

＆＃13;

＆＃13;

var filter = d3.select("svg").append("defs")
      .append("filter")
      .attr("id", "blur")
      .append("feGaussianBlur")
      .attr("stdDeviation", 1);

var edges = d3.selectAll('.edge');
  var allEllipse = d3.selectAll('ellipse');
  var allNodes = d3.selectAll('.node');
  var ellipseSelected; 
  var pathSelected;
  var parentNodeX;
  var parentNodeY;
  var relationshipName;
  var indexEdge;
  var fromData;
  var toData;
  //flag =1 ,when we have both src and trg
  var flag = 1;
  var data = 
[{"seq":"6", "start":"Delhi", "end":"", "rel":"" , "rows":"700"},{"seq":"1", "start":"Mumbai", "end":"Bangalore", "rel":" BLR-MUM-440 ", "rows":"300"}, {"seq":"2", "start":"Bangalore", "end":"Goa", "rel":" BLR-GOA-432 ", "rows":"11"},{"seq":"3", "start":"Goa", "end":"Jaipur", "rel":" GOA-JAI-884 ", "rows":"111"},{"seq":"4", "start":"Kolkatta", "end":"Bangalore", "rel":" BLR-KOL-228 " , "rows":"500"},{"seq":"5", "start":"Jaipur", "end":"Kolkatta", "rel":" JAI-KOL-743 " , "rows":"700"},{"seq":"6", "start":"Delhi", "end":"", "rel":"" , "rows":"999"}];
debugger;
function ellipseAdd()
  {
  
 
  //console.log("ellipse added");
  debugger
	  d3.select(ellipseSelected.parentNode) 
	  .append("ellipse")
	   .attr('cx', parentNodeX) //thisParentBBox.left + thisParentBBox.width/2)
	    .attr('cy', parentNodeY)
	                        .attr("rx", 15)
	                        .attr("ry", 7)
	                        .attr("stroke-width", 2)
	                        .attr("stroke", "white")
	 .style('fill', '#CE2029')
	  d3.select(ellipseSelected.parentNode)
	  	.data([toData])
	    .append("text")
			.attr('x', parentNodeX-10) //thisParentBBox.left + thisParentBBox.width/2)
	    .attr('y', parentNodeY+4).text(0).style('fill','white')
	    .attr("font-size", "8px")
	    .transition()
	    .duration(3000)
	        .tween("text", function(d) {
	        debugger
	            var i = d3.interpolate(fromData, d),
	                prec = (d + "").split("."),
	                round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;
							debugger
	            return function(t) {
	            
	                this.textContent = Math.round(i(t) * round) / round;
	            };
	        });
  	
   

  
  
  }
 function blinker()
{



	  if(flag==0)
		  {
		  	//for adding ellipse and text to it
		  ellipseAdd();
		  	
		  //	console.log("ellipse added done");
		  }
	  else{
		  //blink 3 things\
		  //ellipse
		  ellipseAdd();
        d3.select("svg g.graph").selectAll("*").attr("filter","url(#blur)");
    d3.select('#' + indexAndEdge[indexEdge].id).attr("filter",undefined);
    d3.select('#' + indexAndEdge[indexEdge].id).selectAll("*").attr("filter",undefined);
		  //edgeTransition
      //console.log("ellipse added done now blinking"); 
      //console.log("blinkStartEdge" +indexEdge );
		  d3.select('#' + indexAndEdge[indexEdge].id + ' path')
		  .transition().style('stroke','grey').duration(300).style('opacity', 1)
		  .transition().style('stroke','red').style('stroke-width', 2)
		  .transition().duration(300).duration(300).style('opacity', 1)
		  .transition().style('stroke','grey').duration(300).style('opacity', 1)
		  .transition().style('stroke','red').style('stroke-width', 2)
		  .transition().duration(300).duration(300).style('opacity', 1)
		  .transition().style('stroke','grey').duration(300).style('opacity', 1)
		  .transition().style('stroke','red').style('stroke-width', 2)
		  .transition().duration(300).duration(300).style('opacity', 1)
		  .transition().style('stroke','grey').style('stroke-width',1) .duration(300).style('opacity', 1)
	      .transition()
           .each("end",function(){
         d3.select(this).style('stroke', 'yellow').style('stroke-width', 1); //select current id from array
         d3.select("svg").selectAll("*").attr("filter",undefined);
      });
	       
	      }
	     
	    
		  
  	


	

		  
	  }
	  
  
  
  edges.style('opacity', 1);
  var indexAndEdge = [];
  var countOnNode = [];
  edges.each(function(d, i) {
 // debugger
    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,
      //destination:String(this.childNodes[1].childNodes[0].nodeValue).split("->")[1],
      relation:this.childNodes[7].childNodes[0]
      	
    
    })
  });
  
    d3.selectAll('.node').each(function(d, i) {
  //debugger;
    var thisNodeCount	 = this.id;
    countOnNode.push({ //push index you are at, the edge count worked out above and the id
      id : thisNodeCount,
      prevData : 0,
      incrementData : 0
      
      	
    
    })
  });
  
  //debugger;
//for(var i=0 ; i< data.length ;i++)


var newCount =0

function timer() {
  setTimeout(function(d) {
  	
    if (newCount < data.length) { //if we havent gone through all edges
    
      debugger
      
      
      if(data[newCount].end.length==0)
		{
		flag = 0;
		for(jj=0;jj<allNodes[0].length;jj++)
			{
			//if sourseName matches
     // debugger;
			if(String(allNodes[0][jj].childNodes[5].childNodes[0].nodeValue)==data[newCount].start)
				{
        //console.log("yesss");
				ellipseSelected = d3.selectAll('.node')[0][jj].childNodes[3];
				
				parentNodeX = ellipseSelected.attributes.cx.value-ellipseSelected.attributes.rx.value +(2*ellipseSelected.attributes.rx.value) ;
			    parentNodeY =ellipseSelected.attributes.cy.value-(ellipseSelected.attributes.ry.value/2); 
				//send the data to interpolate
				//match id and update prevData ,incrementData 
				for( var l= 0 ; l  < countOnNode.length ; l++ )
					{
					if(countOnNode[l].id == d3.selectAll('.node')[0][jj].id )
						{
						countOnNode[l].prevData = countOnNode[l].incrementData;
						countOnNode[l].incrementData = data[newCount].rows;
						fromData = countOnNode[l].prevData ;
						toData   = countOnNode[l].incrementData;
						}
					}
				
				blinker();
				
				}
			}
		flag=1;
		}
	else
		{
			//check relation and targetNode
			//check target
			flag = 1;
			for(var j=0 ; j < allNodes[0].length ; j++ )
			{
				if(String(allNodes[0][j].childNodes[5].childNodes[0].nodeValue)==data[newCount].end)
				{
					ellipseSelected = d3.selectAll('.node')[0][j].childNodes[3];
					parentNodeX = ellipseSelected.attributes.cx.value-ellipseSelected.attributes.rx.value +(2*ellipseSelected.attributes.rx.value) ;
				    parentNodeY =ellipseSelected.attributes.cy.value-(ellipseSelected.attributes.ry.value/2); 
            
						for( var l= 0 ; l  < countOnNode.length ; l++ )
						{
						if(countOnNode[l].id == d3.selectAll('.node')[0][j].id )
							{
								countOnNode[l].prevData = countOnNode[l].incrementData;
								countOnNode[l].incrementData = data[newCount].rows;
								fromData = countOnNode[l].prevData ;
								toData   = countOnNode[l].incrementData;
							}
						}
					//set the edge by checking relation
						for(var k=0 ; k < indexAndEdge.length ; k++)
						{
							
						//if(edges[0][k].childNodes[7].childNodes[0] == indexAndEdge)
							if(data[newCount].rel == String(indexAndEdge[k].relation.nodeValue))
							{
								indexEdge = k;
							}
						}
					blinker();
					flag = 0;
				}
			}
		
		}


//allEllipse 

      newCount++;
      timer();
    } else {
   // count =0 ;
    timer()
    //  console.log('end') //end
    }
  }, 3000)
}


timer();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;