D3 seçili düğümü ve alt virgül ile atalarını, yönlendirilen bir grafikte vurgulamak için işaretleyin

Question

Bir düğümdeki gezinme çizgisinde, düğümdeki düğümleri ve düğümleri vurgulamak istiyorum. New York Times 'Paths to the white house' ilham aldı:

Ben this question cevabını gördük this Fiddle ile kullanarak: o eğer

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

onlar kaynak ve hedef kullandığınız rağmen, acaba Ebeveyn ve çocukları kullanarak bir ağ diyagramı (kuvvet-güdümlü grafik) ile nasıl mümkün ve nasıl yapılır?

Answer 1

this example'da bulunan işlevleri uyarlayarak benzer bir şey yaptım. İşin sırrı yalnızca vurgulamak istediğiniz bağlantılarda çalışan seçimler oluşturmaktır. İşte benim kod snippet'idir var:

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

terminoloji kaynağı kullanır ve hedef-ı kaynak hedef ve ebeveyn-çocuk arasındaki çok ayrım olmadığını hayal değil. Yukarıdakileri düzenleyerek çalışmanızı sağlayabilirsiniz, böylece .each() ve .classed() geri aramaları sadece vurgulanan düğümde, (birden çok nesilde) çocuklarında ve aralarındaki bağlantılar üzerinde çalışır.