nl_tokens: Fades and unfades connected nodes to a given targetNode .
pl_tokens: function fadeRelatedNodes ( targetNode , selected , nodes , links ) { var opacity = <mask> ? 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)' : '' ) ; }