D3が選択されたノードを強調表示し、強制有向グラフの親ノードと祖先ノードへのリンク

Question

子ノードが移動されたときに親ノードへのリンクとノードをグラフで強調したいと思います。私はニューヨークタイムズ'Paths to the white house'からインスピレーションを取った：

私が使用してthis Fiddleでthis questionに答えを見ている：彼らは、ソースとターゲットを使っているけれども、それはかしら、

var node = svg.selectAll(".node") 
    .data(graph.nodes) 
    .enter() 
    .append("g") 
    .attr("class", function(d) { return "node " + d.name + " " + d.location; }) 
    .call(force.drag) 
    .on("mouseover", function(d) { 
     // if(isConnected(d, o)) { 
     d3.select(this).select("circle").style("stroke-width", 6);    
     var nodeNeighbors = graph.links.filter(function(link) { 
      return link.source.index === d.index || link.target.index === d.index; 
     }) 
     .map(function(link) { 
      return link.source.index === d.index ? link.target.index : link.source.index; 
     });    
     svg.selectAll('circle').style('stroke', 'gray'); 
     svg.selectAll('circle').filter(function(node) { 
      return nodeNeighbors.indexOf(node.index) > -1; 
     }) 
     // } 
    .on("mouseover", function(d) { 
     // I would like to insert an if statement to do all of 
     // these things to the connected nodes 
     // if(isConnected(d, o)) { 
     d3.select(this).select("circle").style("stroke-width", 6); 
     d3.select(this).select("circle").style("stroke", "orange"); 
     // } 
    }) 
    .on("mouseout", function(d) { 
     // if(isConnected(d, o)) { 
     d3.select(this).select("circle").style("stroke-width", 1.5); 
     d3.select(this).select("circle").style("stroke", "gray"); 
     // } 
    }); 

を親と子を使ったネットワークダイアグラム（力の向きを示すグラフ）を使って、やっていくこともできますか？

Answer 1

私は、this exampleにある機能を適合させることによって同様のことをしました。そのトリックは、ハイライトしたいリンク上でのみ機能する選択肢を作成することです。ここに私のコードの抜粋です：

この force-directed example

function linkMouseover(d){ 
    chart.selectAll(".node").classed("active", function(p) { return d3.select(this).classed("active") || p === d.source || p === d.target; }); 
      } 
// Highlight the node and connected links on mouseover. 
function nodeMouseover(d) { 
chart.selectAll(".link").classed("active", function(p) { return d3.select(this).classed("active") || p.source === d || p.target === d; }); 
      chart.selectAll(".link.active").each(function(d){linkMouseover(d)}) 
      d3.select(this).classed("active", true); 
      } 

は、用語のソースを使用し、ターゲットは-Iは、ソース・ターゲットと親子間に大きな違いがあります想像していません。 .each()と.classed()コールバックは、強調表示されたノード、その子孫（複数の世代）、およびそれらの間のリンク上でのみ動作するように、上記を編集することで機能させることができます。