d3.js中的Z指数

时间：2016-05-19 06:32:29

标签： javascript d3.js svg

＆＃13;
＆＃13; 
App Store
＆＃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', '#AB4B52')
	  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;
＆＃13;
＆＃13;

我有.svg文件，并且我使用d3为其设置动画并将椭圆附加到.svg文件中的元素。我想将椭圆放在.svg路径上。怎么做？在片段中，添加到节点班加罗尔的椭圆位于从班加罗尔到德里的路径下方。 如何将每个添加的椭圆放在路径上的节点上？

2 个答案:

答案 0 :(得分：0)

您最后添加的d3元素显示在顶部。解决方案是在图形和元素之间创建另一个图层以包含您的项目，layer1和layer2，将它们附加到父节点，然后将所有椭圆附加到layer2。那样你所有的椭圆都会在上面。

var layer1 = graph.append('g');
var layer2 = graph.append('g'); //elements within always above layer 1

var ellipse = layer2.append('ellipse')
    .attr...

var path = layer1.append('path')
    .attr...

答案 1 :(得分：0)

SVG不支持Z-Index，因此附加元素的顺序决定了它们可以说是zindex。

@ Softwarenewbie7331是正确的，但由于您的SVG已经确定，您必须移动自己的边缘。

这是执行此操作的代码（vanilla JS）：

var theGraph = document.getElementById('graph0') //getContainer
var polygon = document.getElementsByTagName('polygon')[0] //getPolygon to insert after

var allEdgesJS = document.getElementsByClassName("edge"); //select all Edges
for (var i = 0; i < allEdgesJS.length; i++) { //Loop through edges to move
  theGraph.insertBefore(allEdgesJS[i], polygon.nextSibling); //insert after polygon

}

上面的代码通过循环遍历边缘并在创建椭圆之前将它们逐个向上移动来工作。我使用insertBefore (Documentation Here)。在容器中的所有内容之前插入。但是我通过使用.nextSibling (Documentation Here)来自定义这个以插入多边形元素之后。

这是更新的工作小提琴，没​​有你留下的所有讨厌的调试器：P：https://jsfiddle.net/thatOneGuy/ng0pt0m0/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; 

var theGraph = document.getElementById('graph0')
var polygon = document.getElementsByTagName('polygon')[0]

var allEdgesJS = document.getElementsByClassName("edge"); // order: first, second, third
for (var i = 0; i < allEdgesJS.length; i++) {
  theGraph.insertBefore(allEdgesJS[i], polygon.nextSibling); // order: third, first, second

}




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', '#AB4B52')
  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();
<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>

相关问题
最新问题