title: d3js force directed - On hover to node, highlight/colourup linked nodes and links?
body: <p>I have force directed graph with 4 types of nodes and two types of links. One type of node (the small blue one) I'm using as &quot;connection node&quot; between two bigger nodes.</p>
  <p>on mouseover node, it gets bigger, but also I wanna colour up &quot;connections&quot; to this node in different color. So whey you hover over a node... all links and little &quot;connection nodes&quot; gets in the different color, so you can know to which other bigger node is this one hovered connected.</p>
  <p>You can see my situation on following link: <a href="http://jsfiddle.net/2pdxz/" rel="noreferrer">http://jsfiddle.net/2pdxz/</a></p>
  <p>For example: If you hover up <code>Google</code> node,  links to <code>Yahoo</code> with &quot;connection&quot; node gets highlighted and links to <code>CDO</code> and <code>CTO</code> gets highlighted</p>
  <p>I've tried to add this part of code:</p>
  <pre><code>function fade(opacity) 
  {  link.style(&quot;opacity&quot;, function(d) {
     return d.source === d || d.target === d ? 1 : opacity;
                  });
              
              }
  </code></pre>
  <p>which I picked up from some other question with the similar problem but I don't know how this could actually help me, because I'm noob about d3js.</p>
  <p>The exact code looks like this</p>
  <p>Script:</p>
  <pre><code>var data = {&quot;nodes&quot;:[
                              {&quot;name&quot;:&quot;YHO&quot;, &quot;full_name&quot;:&quot;Yahoo&quot;, &quot;type&quot;:1, &quot;slug&quot;: &quot;www.yahoo.com&quot;, &quot;entity&quot;:&quot;company&quot;, &quot;img_hrefD&quot;:&quot;&quot;, &quot;img_hrefL&quot;:&quot;&quot;},
                              {&quot;name&quot;:&quot;GGL&quot;, &quot;full_name&quot;:&quot;Google&quot;, &quot;type&quot;:2, &quot;slug&quot;: &quot;www.google.com&quot;, &quot;entity&quot;:&quot;company&quot;, &quot;img_hrefD&quot;:&quot;&quot;, &quot;img_hrefL&quot;:&quot;&quot;},
                              {&quot;name&quot;:&quot;BNG&quot;, &quot;full_name&quot;:&quot;Bing&quot;, &quot;type&quot;:2, &quot;slug&quot;: &quot;www.bing.com&quot;, &quot;entity&quot;:&quot;company&quot;, &quot;img_hrefD&quot;:&quot;&quot;, &quot;img_hrefL&quot;:&quot;&quot;},
                              {&quot;name&quot;:&quot;YDX&quot;, &quot;full_name&quot;:&quot;Yandex&quot;, &quot;type&quot;:2, &quot;slug&quot;: &quot;www.yandex.com&quot;, &quot;entity&quot;:&quot;company&quot;, &quot;img_hrefD&quot;:&quot;&quot;, &quot;img_hrefL&quot;:&quot;&quot;},
                              
                              {&quot;name&quot;:&quot;Desc1&quot;, &quot;type&quot;:4, &quot;slug&quot;: &quot;&quot;, &quot;entity&quot;:&quot;description&quot;},
                              {&quot;name&quot;:&quot;Desc2&quot;, &quot;type&quot;:4, &quot;slug&quot;: &quot;&quot;, &quot;entity&quot;:&quot;description&quot;},
                              {&quot;name&quot;:&quot;Desc4&quot;, &quot;type&quot;:4, &quot;slug&quot;: &quot;&quot;, &quot;entity&quot;:&quot;description&quot;},
                              
                              {&quot;name&quot;:&quot;CEO&quot;, &quot;prefix&quot;:&quot;Mr.&quot;, &quot;fst_name&quot;:&quot;Jim&quot;, &quot;snd_name&quot;:&quot;Bean&quot;, &quot;type&quot;:3, &quot;slug&quot;: &quot;&quot;, &quot;entity&quot;:&quot;employee&quot;},
                              {&quot;name&quot;:&quot;ATT&quot;, &quot;prefix&quot;:&quot;Ms.&quot;, &quot;fst_name&quot;:&quot;Jenna&quot;, &quot;snd_name&quot;:&quot;Jameson&quot;, &quot;type&quot;:3, &quot;slug&quot;: &quot;&quot;, &quot;entity&quot;:&quot;employee&quot;},
                              {&quot;name&quot;:&quot;CTO&quot;, &quot;prefix&quot;:&quot;Mr.&quot;, &quot;fst_name&quot;:&quot;Lucky&quot;, &quot;snd_name&quot;:&quot;Luke&quot;, &quot;type&quot;:3, &quot;slug&quot;: &quot;&quot;, &quot;entity&quot;:&quot;employee&quot;},
                              {&quot;name&quot;:&quot;CDO&quot;, &quot;prefix&quot;:&quot;Ms.&quot;, &quot;fst_name&quot;:&quot;Pamela&quot;, &quot;snd_name&quot;:&quot;Anderson&quot;, &quot;type&quot;:3, &quot;slug&quot;: &quot;&quot;, &quot;entity&quot;:&quot;employee&quot;},
                              {&quot;name&quot;:&quot;CEO&quot;, &quot;prefix&quot;:&quot;Mr.&quot;, &quot;fst_name&quot;:&quot;Nacho&quot;, &quot;snd_name&quot;:&quot;Vidal&quot;, &quot;type&quot;:3, &quot;slug&quot;: &quot;&quot;, &quot;entity&quot;:&quot;employee&quot;},
                          ], 
                  &quot;links&quot;:[
                              {&quot;source&quot;:0,&quot;target&quot;:4,&quot;value&quot;:1,&quot;distance&quot;:5},
                              {&quot;source&quot;:0,&quot;target&quot;:5,&quot;value&quot;:1,&quot;distance&quot;:5},
                              {&quot;source&quot;:0,&quot;target&quot;:6,&quot;value&quot;:1,&quot;distance&quot;:5},
                              
                              {&quot;source&quot;:1,&quot;target&quot;:4,&quot;value&quot;:1,&quot;distance&quot;:5},
                              {&quot;source&quot;:2,&quot;target&quot;:5,&quot;value&quot;:1,&quot;distance&quot;:5},
                              {&quot;source&quot;:3,&quot;target&quot;:6,&quot;value&quot;:1,&quot;distance&quot;:5},
                              
                              {&quot;source&quot;:7,&quot;target&quot;:3,&quot;value&quot;:10,&quot;distance&quot;:6},
                              {&quot;source&quot;:8,&quot;target&quot;:3,&quot;value&quot;:10,&quot;distance&quot;:6},
                              {&quot;source&quot;:9,&quot;target&quot;:1,&quot;value&quot;:10,&quot;distance&quot;:6},
                              {&quot;source&quot;:10,&quot;target&quot;:1,&quot;value&quot;:10,&quot;distance&quot;:6},
                              {&quot;source&quot;:11,&quot;target&quot;:2,&quot;value&quot;:10,&quot;distance&quot;:6},
                              ]
                     }    
              
              
              
          var w = 560,
              h = 500,
              radius = d3.scale.log().domain([0, 312000]).range([&quot;10&quot;, &quot;50&quot;]);
          
          var vis = d3.select(&quot;body&quot;).append(&quot;svg:svg&quot;)
              .attr(&quot;width&quot;, w)
              .attr(&quot;height&quot;, h);
              
              //vis.append(&quot;defs&quot;).append(&quot;marker&quot;)
              //.attr(&quot;id&quot;, &quot;arrowhead&quot;)
              //.attr(&quot;refX&quot;, 22 + 3) /*must be smarter way to calculate shift*/
              //.attr(&quot;refY&quot;, 2)
              //.attr(&quot;markerWidth&quot;, 6)
              //.attr(&quot;markerHeight&quot;, 4)
              //.attr(&quot;orient&quot;, &quot;auto&quot;)
              //.append(&quot;path&quot;)
                  //.attr(&quot;d&quot;, &quot;M 0,0 V 4 L6,2 Z&quot;); //this is actual shape for arrowhead
          
          //d3.json(data, function(json) {
              var force = self.force = d3.layout.force()
                  .nodes(data.nodes)
                  .links(data.links)
                  .linkDistance(function(d) { return (d.distance*10); })
                  //.friction(0.5)
                  .charge(-250)
                  .size([w, h])
                  .start();
          
          
          
              var link = vis.selectAll(&quot;line.link&quot;)
                  .data(data.links)
                  .enter().append(&quot;svg:line&quot;)
                  .attr(&quot;class&quot;, function (d) { return &quot;link&quot; + d.value +&quot;&quot;; })
                  .attr(&quot;x1&quot;, function(d) { return d.source.x; })
                  .attr(&quot;y1&quot;, function(d) { return d.source.y; })
                  .attr(&quot;x2&quot;, function(d) { return d.target.x; })
                  .attr(&quot;y2&quot;, function(d) { return d.target.y; })
                  .attr(&quot;marker-end&quot;, function(d) {
                                                      if (d.value == 1) {return &quot;url(#arrowhead)&quot;}
                                                      else    { return &quot; &quot; }
                                                  ;});
  
              function fade(opacity) {
                  
                      link.style(&quot;opacity&quot;, function(d) {
                          return d.source === d || d.target === d ? 1 : opacity;
                      });
                  
                  }
                  
                  
              function openLink() {
                  return function(d) {
                      var url = &quot;&quot;;
                      if(d.slug != &quot;&quot;) {
                          url = d.slug
                      } //else if(d.type == 2) {
                          //url = &quot;clients/&quot; + d.slug
                      //} else if(d.type == 3) {
                          //url = &quot;agencies/&quot; + d.slug
                      //}
                      window.open(&quot;//&quot;+url)
                  }
              }
                  
          
              
          
              var node = vis.selectAll(&quot;g.node&quot;)
                  .data(data.nodes)
                .enter().append(&quot;svg:g&quot;)
                  .attr(&quot;class&quot;, &quot;node&quot;)
                  .call(force.drag);
          
              
              node.append(&quot;circle&quot;)
                  .attr(&quot;class&quot;, function(d){ return &quot;node type&quot;+d.type})
                  .attr(&quot;r&quot;,function(d){if(d.entity == &quot;description&quot;){ return 6 } else { return 18 }})
                  //.on(&quot;mouseover&quot;, expandNode);
                  //.style(&quot;fill&quot;, function(d) { return fill(d.type); })
                  
                          
          
              node.append(&quot;svg:image&quot;)
                  .attr(&quot;class&quot;, function(d){ return &quot;circle img_&quot;+d.name })
                  .attr(&quot;xlink:href&quot;, function(d){ return d.img_hrefD})
                  .attr(&quot;x&quot;, &quot;-36px&quot;)
                  .attr(&quot;y&quot;, &quot;-36px&quot;)
                  .attr(&quot;width&quot;, &quot;70px&quot;)
                  .attr(&quot;height&quot;, &quot;70px&quot;)
                  .on(&quot;click&quot;, openLink())
                  .on(&quot;mouseover&quot;, function (d) { if(d.entity == &quot;company&quot;)
                                                      {
                          d3.select(this).attr(&quot;width&quot;, &quot;90px&quot;)
                                          .attr(&quot;x&quot;, &quot;-46px&quot;)
                                          .attr(&quot;y&quot;, &quot;-36.5px&quot;)
                                         .attr(&quot;xlink:href&quot;, function(d){ return d.img_hrefL});                           
                                                      }
                      })
                  .on(&quot;mouseout&quot;, function (d) { if(d.entity == &quot;company&quot;)
                                                  {
                          d3.select(this).attr(&quot;width&quot;, &quot;70px&quot;)
                                          .attr(&quot;x&quot;, &quot;-36px&quot;)
                                          .attr(&quot;y&quot;, &quot;-36px&quot;)
                                         .attr(&quot;xlink:href&quot;, function(d){ return d.img_hrefD});
                                                  }
                      });    
                      
          
              node.append(&quot;text&quot;)
                  .attr(&quot;class&quot;, function(d){ return &quot;nodetext title_&quot;+d.name })
                  .attr(&quot;dx&quot;, 0)
                  .attr(&quot;dy&quot;, &quot;.35em&quot;)
                  .style(&quot;font-size&quot;,&quot;10px&quot;)
                  .attr(&quot;text-anchor&quot;, &quot;middle&quot;)
                  .style(&quot;fill&quot;, &quot;white&quot;)
                  .text(function(d) { if (d.entity != &quot;description&quot;){return d.name} });
                  
                  
  
              node.on(&quot;mouseover&quot;, function (d) {
                  if (d.entity == &quot;company&quot;){   
                      d3.select(this).select('text')
                          .transition()
                          .duration(300)
                          .text(function(d){
                                  return d.full_name;
                              })
                          .style(&quot;font-size&quot;,&quot;15px&quot;)
                          
                  }
                  else if(d.entity == &quot;employee&quot;){
                      var asdf = d3.select(this);
                      asdf.select('text').remove();
                      
                      asdf.append(&quot;text&quot;)
                                  .text(function(d){return d.prefix + ' ' + d.fst_name })
                                  .attr(&quot;class&quot;,&quot;nodetext&quot;)
                                  .attr(&quot;dx&quot;, 0)
                                  .attr(&quot;dy&quot;, &quot;.35em&quot;)
                                  .style(&quot;font-size&quot;,&quot;5px&quot;)
                                  .attr(&quot;text-anchor&quot;, &quot;middle&quot;)
                                  .style(&quot;fill&quot;, &quot;white&quot;)
                                  .transition()
                                  .duration(300)
                                  .style(&quot;font-size&quot;,&quot;12px&quot;);
                      
                      asdf.append(&quot;text&quot;).text(function(d){return d.snd_name })
                                  .attr(&quot;class&quot;,&quot;nodetext&quot;)
                                  .attr(&quot;transform&quot;,&quot;translate(0, 12)&quot;)
                                  .attr(&quot;dx&quot;, 0)
                                  .attr(&quot;dy&quot;, &quot;.35em&quot;)
                                  .style(&quot;font-size&quot;,&quot;5px&quot;)
                                  .attr(&quot;text-anchor&quot;, &quot;middle&quot;)
                                  .style(&quot;fill&quot;, &quot;white&quot;)
                                  .transition()
                                  .duration(300)
                                  .style(&quot;font-size&quot;,&quot;12px&quot;);                                         
                  }
                  else {
                      d3.select(this).select('text')
                          .transition()
                          .duration(300)
                          .style(&quot;font-size&quot;,&quot;15px&quot;)
                  }
                          
                  if (d.entity == &quot;company&quot;) {
                      d3.select(this).select('image')
                          .attr(&quot;width&quot;, &quot;90px&quot;)
                          .attr(&quot;x&quot;, &quot;-46px&quot;)
                          .attr(&quot;y&quot;, &quot;-36.5px&quot;)
                          .attr(&quot;xlink:href&quot;, function (d) {
                              return d.img_hrefL
                              });               
                  }
                  
                  if (d.entity == &quot;company&quot;) {
                  
                      d3.select(this).select('circle')
                                      .transition()
                                      .duration(300)
                                      .attr(&quot;r&quot;,28)
                                      
                  }
                  else if (d.entity == &quot;employee&quot;){
                      d3.select(this).select('circle')
                                      .transition()
                                      .duration(300)
                                      .attr(&quot;r&quot;,32)
                  }
              })
              
               
               node.on(&quot;mouseout&quot;, function (d) {
                  if (d.entity == &quot;company&quot;) {
                      d3.select(this).select('text')
                          .transition()
                          .duration(300)
                          .text(function(d){return d.name;})
                          .style(&quot;font-size&quot;,&quot;10px&quot;)
                      }
                  else if(d.entity == &quot;employee&quot;){
                      ///////////////////////////
                      // CHANGE
                      ///////////////////////////
                      
                      d3.select(this).selectAll('text').remove();
                      
                      //d3.select(this).select('text')
                      d3.select(this).append('text')
                          .text(function(d){return d.name;})
                          .style(&quot;font-size&quot;,&quot;14px&quot;)  
                          .attr(&quot;dx&quot;, 0)
                          .attr(&quot;dy&quot;, &quot;.35em&quot;)
                          .attr(&quot;text-anchor&quot;, &quot;middle&quot;)
                          .style(&quot;fill&quot;, &quot;white&quot;)
                          .attr(&quot;class&quot;,&quot;nodetext&quot;)
                          .transition()
                          .duration(300)
                          .style(&quot;font-size&quot;,&quot;10px&quot;)
                      
                  }
                  else {
                      d3.select(this).select('text')
                          .transition()
                          .duration(300)
                          .style(&quot;font-size&quot;,&quot;10px&quot;)
                  }
                          
                      
                   if (d.entity == &quot;company&quot;) {
                      d3.select(this).select('image')
                          .attr(&quot;width&quot;, &quot;70px&quot;)
                          .attr(&quot;x&quot;, &quot;-36px&quot;)
                          .attr(&quot;y&quot;, &quot;-36px&quot;)
                          .attr(&quot;xlink:href&quot;, function (d) {
                          return d.img_hrefD
                      });
                  }
                  
                  if (d.entity == &quot;company&quot; || d.entity == &quot;employee&quot;) {
                  
                      d3.select(this).select('circle')
                                      .transition()
                                      .duration(300)
                                      .attr(&quot;r&quot;,18)
                  }
                  
              });
          
              force.on(&quot;tick&quot;, function() {
                link.attr(&quot;x1&quot;, function(d) { return d.source.x; })
                    .attr(&quot;y1&quot;, function(d) { return d.source.y; })
                    .attr(&quot;x2&quot;, function(d) { return d.target.x; })
                    .attr(&quot;y2&quot;, function(d) { return d.target.y; });
          
                node.attr(&quot;transform&quot;, function(d) { return &quot;translate(&quot; + d.x + &quot;,&quot; + d.y + &quot;)&quot;; });
              });
          //});
  </code></pre>
  <p>CSS:</p>
  <pre><code>@charset &quot;utf-8&quot;;
  /* CSS Document */
  
  .link10 { stroke: #ccc; stroke-width: 2px; stroke-dasharray: 3, 3; }
  .link1 { stroke: #000; stroke-width: 2px;}
  .nodetext { pointer-events: none;}
  
  .node.type1 {
    fill:#690011;
  }
  .node.type2 {
    fill:#BF0426;
  }
  .node.type3 {
    fill:#E5B96F;
  }
  .node.type4 {
    fill:#FFFFFF;
    stroke:#1695A3; 
    stroke-width: 3px;
  }
  
  .node.type5 {
      fill:#1BC9E0;
  }
  
  .node.type6 {
      fill:#E01B98;
  }
  
  image.circle {
      cursor:pointer;
  }
  
  .fadein{
  display:none;
  font-size:20px;
  }
  
  .rectD{
  background-color:#000000;
  width:70px;
  height:30px
  }
  
  .rectL{
  background-color:#000000;
  width:90px;
  height:30px
  }
  </code></pre>
  <p>You can edit and see working example in my linked jsfiddle..</p>
  <p>Any suggestion or help is welcome..</p>