Z index in d3.js

Question

  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




I have .svg file and i'm animating it using d3 and appending ellipse to the elements in .svg file. I want to place the ellipse over the .svg path. How to do that? In snippet ,ellipse added to node bangalore is below the path from Bangalore to Delhi.
How to place every added ellipse to the node over path?

thatOneGuy · Accepted Answer

SVG doesn't support Z-Index so the order the elements are appended determine what zindex they are so to speak.

@Softwarenewbie7331 is correct but since your SVG is already determined you have to move the edges your self.

Here is the code to do this (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

}

The above code works by looping through the edges and moving them one by one up the DOM before you create the ellipse's. I use the insertBefore (Documentation Here). To insert before everything in the container. But I customise this to insert after the polygon element by using .nextSibling (Documentation Here).

Here is the updated working fiddle, without all the annoying debuggers you left in :P : https://jsfiddle.net/thatOneGuy/ng0pt0m0/1/

Working code incase fiddle is down :

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();

Z index in d3.js

Answers (2)

Related Questions