title: How to highlight a source node and all its target nodes and corresponding links in d3 hierarchical edge bundling
body: <p>I am a beginner in d3 JS. I have created a d3 hierarchical edge bundling visualization.Now i am trying to do this: whenever i move mouse over any node(mouse-over event) ,all its target nodes and the corresponding links must be highlighted.How to do this?
  My current code is:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
          &lt;style&gt;
              .node {
                font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
              }
              .link {
                stroke: steelblue;
                stroke-opacity: .4;
                fill: none;
              }
          &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
              &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
              &lt;script&gt;
              var classes=[
  {"name":"a","size":3938,"imports":["b","f"]},
  {"name":"b","size":3938,"imports":[]},
  {"name":"c","size":3938,"imports":["a"]},
  {"name":"d","size":3938,"imports":[]},
  {"name":"e","size":3938,"imports":[]},
  {"name":"f","size":3938,"imports":[]}
  
  
  ];
                      var diameter = 960,
                          radius = diameter / 2,
                          innerRadius = radius - 120;
                      var cluster = d3.layout.cluster()
                          .size([360, innerRadius]);
  
                      var bundle = d3.layout.bundle();
  
                      var line = d3.svg.line.radial()
                          .interpolate("bundle")
                          .tension(.85)
                          .radius(function(d) { return d.y; })
                          .angle(function(d) { return d.x / 180 * Math.PI; });
  
                      var svg = d3.select("body").append("svg")
                          .attr("width", diameter)
                          .attr("height", diameter)
                        .append("g")
                          .attr("transform", "translate(" + radius + "," + radius + ")");
  
  
  
                        var nodes = cluster.nodes(packageHierarchy(classes)),
                            links = packageImports(nodes);
  
                        svg.selectAll(".link")
                            .data(bundle(links))
                          .enter().append("path")
                            .attr("class", "link")
                            .attr("d", line);
  
                        svg.selectAll(".node")
                            .data(nodes.filter(function(n) { return !n.children; }))
                          .enter().append("g")
                            .attr("class", "node")
                            .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
                          .append("text")
                            .attr("dx", function(d) { return d.x &lt; 180 ? 8 : -8; })
                            .attr("dy", ".31em")
                            .attr("text-anchor", function(d) { return d.x &lt; 180 ? "start" : "end"; })
                            .attr("transform", function(d) { return d.x &lt; 180 ? null : "rotate(180)"; })
                            .text(function(d) { return d.key; });
  
  
                      // Lazily construct the package hierarchy from class names.
  
                      function packageHierarchy(classes) {
                        var map = {};
                        function find(name, data) {
                          var node = map[name], i;
                          if (!node) {
                            node = map[name] = data || {name: name, children: []};
                            if (name.length) {
                              node.parent = find(name.substring(0, i = name.lastIndexOf(".")));
                              node.parent.children.push(node);
                              node.key = name.substring(i + 1);
                            }
                          }
                          return node;
                        }
                        classes.forEach(function(d) {
                          find(d.name, d);
                        });
                        return map[""];
                      }
  
  
                      // Return a list of imports for the given array of nodes.
                      function packageImports(nodes) {
                        var map = {},
                            imports = [];
                        // Compute a map from name to node.
                        nodes.forEach(function(d) {
                          map[d.name] = d;
                        });
                        // For each import, construct a link from the source to target node.
                        nodes.forEach(function(d) {
                          if (d.imports) d.imports.forEach(function(i) {
                            imports.push({source: map[d.name], target: map[i]});
                          });
                        });
                        return imports;
                      }
                      &lt;/script&gt;
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>