D3 evidenzia il nodo selezionato e i relativi collegamenti a padre e antenati in un grafico forza forzata

Question

Vorrei evidenziare i collegamenti e i nodi al nodo padre in un grafico quando il nodo figlio è al passaggio del mouse. Ho preso ispirazione da The New York Times 'Paths to the white house':

ho visto la risposta a this question con this Fiddle utilizzando:

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

Anche se si sta utilizzando origine e di destinazione, mi chiedo se è anche possibile, e come si farebbe, con un diagramma di rete (grafico orientato alla forza) usando genitori e figli?

Answer 1

Ho fatto qualcosa di simile adattando le funzioni trovate in this example. Il trucco è creare selezioni che funzionino solo sui collegamenti che desideri evidenziare. Ecco un frammento del mio codice:

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

Questa force-directed example utilizza la sorgente di terminologia e target non mi immagino ci sia molta differenza tra la sorgente-bersaglio e padre-figlio. Dovresti essere in grado di farlo funzionare modificando quanto sopra, in modo tale che i callback .each() e .classed() operino solo sul nodo evidenziato, sui suoi figli (di più generazioni) e sui collegamenti tra di essi.