title: Fading effect in d3.js
body: <p>I'm animating the paths in an SVG file using <code>D3.js</code>. I want to fade out other parts of the SVG when I'm blinking the path.</p>
  
  <p>How to achieve it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 &gt; 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("-&gt;")[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&lt; data.length ;i++)
  
  var newCount = 0;
  
  function timer() {
      setTimeout(function(d) {
          if (newCount &lt; data.length) { //if we havent gone through all edges
              debugger
              if(data[newCount].end.length==0) {
                  flag = 0;
                  for(jj=0;jj&lt;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 &lt; 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 &lt; 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 &lt; 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 &lt; 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();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
    &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
    &lt;!-- Generated by graphviz version 2.38.0 (20140413.2041)
   --&gt;
    &lt;!-- Title: graphname Pages: 1 --&gt;
  
    &lt;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"&gt;
      &lt;g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 301)"&gt;
        &lt;title&gt;graphname&lt;/title&gt;
        &lt;polygon fill="white" stroke="none" points="-4,4 -4,-301 703.946,-301 703.946,4 -4,4" /&gt;
        &lt;!-- 0 --&gt;
        &lt;g id="node1" class="node"&gt;
          &lt;title&gt;0&lt;/title&gt;
          &lt;ellipse fill="#b2dfee" stroke="#b2dfee" cx="456.946" cy="-192" rx="40.0939" ry="18" /&gt;
          &lt;text text-anchor="middle" x="456.946" y="-188.3" font-family="Times New Roman,serif" font-size="14.00"&gt;Mumbai&lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 1 --&gt;
        &lt;g id="node2" class="node"&gt;
          &lt;title&gt;1&lt;/title&gt;
          &lt;ellipse fill="#b2dfee" stroke="#b2dfee" cx="399.946" cy="-18" rx="46.5926" ry="18" /&gt;
          &lt;text text-anchor="middle" x="399.946" y="-14.3" font-family="Times New Roman,serif" font-size="14.00"&gt;Bangalore&lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 0&amp;#45;&amp;gt;1 --&gt;
        &lt;g id="edge1" class="edge"&gt;
          &lt;title&gt;0&amp;#45;&amp;gt;1&lt;/title&gt;
          &lt;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" /&gt;
          &lt;polygon fill="grey" stroke="grey" points="456.557,-163.514 459.204,-173.773 463.532,-164.103 456.557,-163.514" /&gt;
          &lt;text text-anchor="middle" x="509.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00"&gt; BLR&amp;#45;MUM&amp;#45;440 &lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 6 --&gt;
        &lt;g id="node7" class="node"&gt;
          &lt;title&gt;6&lt;/title&gt;
          &lt;ellipse fill="#b2dfee" stroke="#b2dfee" cx="339.946" cy="-105" rx="27" ry="18" /&gt;
          &lt;text text-anchor="middle" x="339.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00"&gt;Goa&lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 0&amp;#45;&amp;gt;6 --&gt;
        &lt;g id="edge6" class="edge"&gt;
          &lt;title&gt;0&amp;#45;&amp;gt;6&lt;/title&gt;
          &lt;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" /&gt;
          &lt;polygon fill="grey" stroke="grey" points="406.251,-192.402 416.627,-190.258 407.179,-185.464 406.251,-192.402" /&gt;
          &lt;text text-anchor="middle" x="391.946" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"&gt; GOA&amp;#45;MUM&amp;#45;108 &lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 2 --&gt;
        &lt;g id="node3" class="node"&gt;
          &lt;title&gt;2&lt;/title&gt;
          &lt;ellipse fill="#b2dfee" stroke="#b2dfee" cx="118.946" cy="-105" rx="37.0935" ry="18" /&gt;
          &lt;text text-anchor="middle" x="118.946" y="-101.3" font-family="Times New Roman,serif" font-size="14.00"&gt;Cochin&lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 3 --&gt;
        &lt;g id="node4" class="node"&gt;
          &lt;title&gt;3&lt;/title&gt;
          &lt;ellipse fill="#b2dfee" stroke="#b2dfee" cx="118.946" cy="-192" rx="32.4942" ry="18" /&gt;
          &lt;text text-anchor="middle" x="118.946" y="-188.3" font-family="Times New Roman,serif" font-size="14.00"&gt;Jaipur&lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 3&amp;#45;&amp;gt;2 --&gt;
        &lt;g id="edge8" class="edge"&gt;
          &lt;title&gt;3&amp;#45;&amp;gt;2&lt;/title&gt;
          &lt;path fill="none" stroke="grey" d="M118.946,-163.734C118.946,-150.419 118.946,-134.806 118.946,-123.175" /&gt;
          &lt;polygon fill="grey" stroke="grey" points="115.446,-163.799 118.946,-173.799 122.446,-163.799 115.446,-163.799" /&gt;
          &lt;text text-anchor="middle" x="162.446" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"&gt; COC&amp;#45;JAI&amp;#45;983 &lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 3&amp;#45;&amp;gt;6 --&gt;
        &lt;g id="edge5" class="edge"&gt;
          &lt;title&gt;3&amp;#45;&amp;gt;6&lt;/title&gt;
          &lt;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" /&gt;
          &lt;polygon fill="grey" stroke="grey" points="152.768,-173.843 144.763,-180.784 155.349,-180.35 152.768,-173.843" /&gt;
          &lt;text text-anchor="middle" x="287.946" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"&gt; GOA&amp;#45;JAI&amp;#45;884 &lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 4 --&gt;
        &lt;g id="node5" class="node"&gt;
          &lt;title&gt;4&lt;/title&gt;
          &lt;ellipse fill="#b2dfee" stroke="#b2dfee" cx="40.9464" cy="-279" rx="40.8928" ry="18" /&gt;
          &lt;text text-anchor="middle" x="40.9464" y="-275.3" font-family="Times New Roman,serif" font-size="14.00"&gt;Kolkatta&lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 4&amp;#45;&amp;gt;1 --&gt;
        &lt;g id="edge3" class="edge"&gt;
          &lt;title&gt;4&amp;#45;&amp;gt;1&lt;/title&gt;
          &lt;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" /&gt;
          &lt;polygon fill="grey" stroke="grey" points="26.3613,-252.829 33.2323,-260.894 32.8903,-250.305 26.3613,-252.829" /&gt;
          &lt;text text-anchor="middle" x="68.4464" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"&gt; BLR&amp;#45;KOL&amp;#45;228 &lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 4&amp;#45;&amp;gt;3 --&gt;
        &lt;g id="edge7" class="edge"&gt;
          &lt;title&gt;4&amp;#45;&amp;gt;3&lt;/title&gt;
          &lt;path fill="none" stroke="grey" d="M62.7013,-254.293C76.1886,-239.595 93.1216,-221.142 104.866,-208.344" /&gt;
          &lt;polygon fill="grey" stroke="grey" points="59.8,-252.278 55.6176,-262.012 64.9576,-257.011 59.8,-252.278" /&gt;
          &lt;text text-anchor="middle" x="127.446" y="-231.8" font-family="Times New Roman,serif" font-size="14.00"&gt; JAI&amp;#45;KOL&amp;#45;743 &lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 5 --&gt;
        &lt;g id="node6" class="node"&gt;
          &lt;title&gt;5&lt;/title&gt;
          &lt;ellipse fill="#b2dfee" stroke="#b2dfee" cx="522.946" cy="-279" rx="29.4969" ry="18" /&gt;
          &lt;text text-anchor="middle" x="522.946" y="-275.3" font-family="Times New Roman,serif" font-size="14.00"&gt;Delhi&lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 5&amp;#45;&amp;gt;0 --&gt;
        &lt;g id="edge4" class="edge"&gt;
          &lt;title&gt;5&amp;#45;&amp;gt;0&lt;/title&gt;
          &lt;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" /&gt;
          &lt;polygon fill="grey" stroke="grey" points="490.4,-264.82 500.718,-267.226 494.152,-258.911 490.4,-264.82" /&gt;
          &lt;text text-anchor="middle" x="520.446" y="-231.8" font-family="Times New Roman,serif" font-size="14.00"&gt; MUM&amp;#45;DEL&amp;#45;340 &lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 5&amp;#45;&amp;gt;1 --&gt;
        &lt;g id="edge9" class="edge"&gt;
          &lt;title&gt;5&amp;#45;&amp;gt;1&lt;/title&gt;
          &lt;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" /&gt;
          &lt;polygon fill="grey" stroke="grey" points="551.149,-258.463 545.015,-267.101 555.197,-264.173 551.149,-258.463" /&gt;
          &lt;text text-anchor="middle" x="654.446" y="-144.8" font-family="Times New Roman,serif" font-size="14.00"&gt; BLR&amp;#45;DEL&amp;#45;270 &lt;/text&gt;
        &lt;/g&gt;
        &lt;!-- 6&amp;#45;&amp;gt;1 --&gt;
        &lt;g id="edge2" class="edge"&gt;
          &lt;title&gt;6&amp;#45;&amp;gt;1&lt;/title&gt;
          &lt;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" /&gt;
          &lt;polygon fill="grey" stroke="grey" points="336.824,-76.3034 339.381,-86.5849 343.794,-76.9527 336.824,-76.3034" /&gt;
          &lt;text text-anchor="middle" x="395.446" y="-57.8" font-family="Times New Roman,serif" font-size="14.00"&gt; BLR&amp;#45;GOA&amp;#45;432 &lt;/text&gt;
        &lt;/g&gt;
      &lt;/g&gt;
  
    &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here I'm handling elements of an SVG file through <code>D3.js</code> and adding ellipse to the node of the SVG file. I'm blinking the paths in the SVG file in a particular sequence. I want to fade out other part when i'm blinking the path.</p>