d3.js - D3 在力有向图中突出显示选定节点及其与父节点和祖先节点的链接

Question

当悬停子节点时，我想在图中突出显示指向父节点的链接和节点。我的灵感来自《纽约时报》'Paths to the white house' :



我看到了 this question 的答案与 this Fiddle使用:

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 中找到的函数做了类似的事情。 .诀窍是构建仅适用于您想要突出显示的链接的选择。这是我的代码片段:

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

此 force-directed example使用术语源和目标——我认为源-目标和父-子之间没有太大区别。您应该能够通过编辑上述内容使其工作，例如 .each()和 .classed()回调仅对突出显示的节点、其(多代)子节点以及它们之间的链接进行操作。