D3 markieren ausgewählten Knoten und seine Links zu Eltern und Vorfahren in einem Force-gerichteten Diagramm

Question

Ich möchte die Links und Knoten auf den übergeordneten Knoten in einem Diagramm markieren, wenn der Kindknoten schwebt. Ich fand seine Inspiration aus der New York Times 'Paths to the white house':

ich die Antwort auf this question mit this Fiddle mit gesehen haben:

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"); 
     // } 
    }); 

Obwohl sie verwenden Quelle und Ziel, frage ich mich, wenn es auch möglich, und wie wäre es, mit einem Netzwerkdiagramm (Force-directed Graph) mit Eltern und Kindern?

Answer 1

Ich habe etwas Ähnliches durch Anpassung der Funktionen in this example gefunden. Der Trick besteht darin, Auswahlen zu erstellen, die nur auf den Links funktionieren, die Sie hervorheben möchten. Hier ist ein Ausschnitt aus meinem Code:

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); 
      } 

Diese force-directed example verwendet die Terminologie Quelle und Ziel-ich mir nicht vorstellen, es gibt viel Unterschied zwischen Quelle-Ziel-und Eltern-Kind. Sie sollten in der Lage sein, es durch Bearbeiten der oben genannten funktionieren, so dass die .each() und .classed() Rückrufe nur auf dem markierten Knoten, seine (mehrere Generationen von) Kinder, und Links zwischen ihnen arbeiten.