template/html/d3-graph.js
function fadeRelatedNodes(targetNode, selected, nodes, links)
   {
      var opacity = selected ? 0.1 : 1;

      var elm = findElementByNode('circle', targetNode);

      // Highlight circle
      elm.classed('selected', opacity < 1);

      // Clean links
      $('path.link').removeAttr('data-show');

      // Traverse all nodes and set `dimmed` class to nodes that are dimmed / not connected in addition to setting
      // fill and stroke opacity.
      nodes.style('stroke-opacity', function(otherNode)
      {
         var thisOpacity = isConnected(targetNode, otherNode) ? 1 : opacity;

         this.setAttribute('fill-opacity', thisOpacity);
         this.setAttribute('stroke-opacity', thisOpacity);

         // Depending on opacity add or remove 'dimmed' class.
         this.classList[thisOpacity === 1 ? 'remove' : 'add']('dimmed');

         return thisOpacity;
      });

      // Traverse all links and set `data-show` and `marker-end` for connected links given the `targetNode`.
      links.style('stroke-opacity', function(otherNode)
      {
         if (otherNode.source === targetNode)
         {
            // Highlight target / sources of the link
            var elmNodes = graph.selectAll('.' + formatClassName('node', otherNode.target));
            elmNodes.attr('fill-opacity', 1);
            elmNodes.attr('stroke-opacity', 1);

            elmNodes.classed('dimmed', false);

            // Highlight arrows
            var elmCurrentLink = $('path.link[data-source=' + otherNode.source.index + ']');
            elmCurrentLink.attr('data-show', true);
            elmCurrentLink.attr('marker-end', 'url(#regular)');

            return 1;
         }
         else
         {
            return opacity;
         }
      });

      // Modify all links that have not had 'data-show' added above.
      var elmAllLinks = $('path.link:not([data-show])');
      elmAllLinks.attr('marker-end', opacity === 1 ? 'url(#regular)' : '');
   }
function fadeRelatedNodes(targetNode, selected, nodes, links)
   {
      var opacity = selected ? 0.1 : 1;

      var elm = findElementByNode('circle', targetNode);

      // Highlight circle
      elm.classed('selected', opacity < 1);

      // Clean links
      $('path.link').removeAttr('data-show');

      // Traverse all nodes and set `dimmed` class to nodes that are dimmed / not connected in addition to setting
      // fill and stroke opacity.
      nodes.style('stroke-opacity', function(otherNode)
      {
         var thisOpacity = isConnected(targetNode, otherNode) ? 1 : opacity;

         this.setAttribute('fill-opacity', thisOpacity);
         this.setAttribute('stroke-opacity', thisOpacity);

         // Depending on opacity add or remove 'dimmed' class.
         this.classList[thisOpacity === 1 ? 'remove' : 'add']('dimmed');

         return thisOpacity;
      });

      // Traverse all links and set `data-show` and `marker-end` for connected links given the `targetNode`.
      links.style('stroke-opacity', function(otherNode)
      {
         if (otherNode.source === targetNode)
         {
            // Highlight target / sources of the link
            var elmNodes = graph.selectAll('.' + formatClassName('node', otherNode.target));
            elmNodes.attr('fill-opacity', 1);
            elmNodes.attr('stroke-opacity', 1);

            elmNodes.classed('dimmed', false);

            // Highlight arrows
            var elmCurrentLink = $('path.link[data-source=' + otherNode.source.index + ']');
            elmCurrentLink.attr('data-show', true);
            elmCurrentLink.attr('marker-end', 'url(#regular)');

            return 1;
         }
         else
         {
            return opacity;
         }
      });

      // Modify all links that have not had 'data-show' added above.
      var elmAllLinks = $('path.link:not([data-show])');
      elmAllLinks.attr('marker-end', opacity === 1 ? 'url(#regular)' : '');
   }
function fadeRelatedNodes ( targetNode , selected , nodes , links ) { var opacity = selected ? 0.1 : 1 ; var elm = findElementByNode ( 'circle' , targetNode ) ; // Highlight circle elm . classed ( 'selected' , opacity < 1 ) ; // Clean links $ ( 'path.link' ) . removeAttr ( 'data-show' ) ; // Traverse all nodes and set `dimmed` class to nodes that are dimmed / not connected in addition to setting // fill and stroke opacity. nodes . style ( 'stroke-opacity' , function ( otherNode ) { var thisOpacity = isConnected ( targetNode , otherNode ) ? 1 : opacity ; this . setAttribute ( 'fill-opacity' , thisOpacity ) ; this . setAttribute ( 'stroke-opacity' , thisOpacity ) ; // Depending on opacity add or remove 'dimmed' class. this . classList [ thisOpacity === 1 ? 'remove' : 'add' ] ( 'dimmed' ) ; return thisOpacity ; } ) ; // Traverse all links and set `data-show` and `marker-end` for connected links given the `targetNode`. links . style ( 'stroke-opacity' , function ( otherNode ) { if ( otherNode . source === targetNode ) { // Highlight target / sources of the link var elmNodes = graph . selectAll ( '.' + formatClassName ( 'node' , otherNode . target ) ) ; elmNodes . attr ( 'fill-opacity' , 1 ) ; elmNodes . attr ( 'stroke-opacity' , 1 ) ; elmNodes . classed ( 'dimmed' , false ) ; // Highlight arrows var elmCurrentLink = $ ( 'path.link[data-source=' + otherNode . source . index + ']' ) ; elmCurrentLink . attr ( 'data-show' , true ) ; elmCurrentLink . attr ( 'marker-end' , 'url(#regular)' ) ; return 1 ; } else { return opacity ; } } ) ; // Modify all links that have not had 'data-show' added above. var elmAllLinks = $ ( 'path.link:not([data-show])' ) ; elmAllLinks . attr ( 'marker-end' , opacity === 1 ? 'url(#regular)' : '' ) ; }
Fades and unfades connected nodes to a given `targetNode`.

@param {object}   targetNode - The target node from which fading occurs / connections are calculated.
@param {boolean}  selected - Indicates if the fade is in / out; true fades nodes / false un-fades nodes.
@param {Array}    nodes - An array of all graph nodes.
@param {Array}    links - An array of all graph links.
Fades and unfades connected nodes to a given targetNode .