D3 zaznacz wybrany węzeł i jego łącza do elementu nadrzędnego i przodków na wykresie ukierunkowanym na siłę.

Question

Chciałbym podświetlić łącza i węzły do ​​węzła nadrzędnego na wykresie, gdy węzeł podrzędny jest zawieszony. Wziąłem inspirację z The New York Times 'Paths to the white house':

Widziałem odpowiedź this question z this Fiddle używając:

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

Choć używasz źródło i cel, zastanawiam się, czy to również możliwe, i jak to się stanie, z diagramem sieciowym (wykres ukierunkowanym na siłę) z wykorzystaniem rodzica i dzieci?

Answer 1

Zrobiłem coś podobnego, dostosowując funkcje znalezione w this example. Sztuką jest tworzenie zaznaczeń, które działają tylko na linki, które chcesz podświetlić. Oto fragment mojego kodu:

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

Ten force-directed example wykorzystuje źródła terminologii i docelowego nie wyobrażam sobie tam dużo rozróżnienie między źródłowym a docelowym rodzic-dziecko. Powinieneś być w stanie sprawić, by działało, edytując powyższe, tak, że callbacki .each() i .classed() działają tylko na podświetlonym węźle, jego (wielu generacjach) elementach podrzędnych i powiązaniach między nimi.