D3突出显示所选节点,并将其链接到强制有向图中的父节点和祖先节点

Question

我想在子节点悬停时突出显示图中父节点的链接和节点.我从纽约时报的"白宫之路"中汲取灵感:

我用这个小提琴看到了这个问题的答案:

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

我通过调整本例中的函数做了类似的事情。诀窍是构建仅适用于您想要突出显示的链接的选择。这是我的代码片段：

\n\n

function linkMouseover(d){\n  chart.selectAll(".node").classed("active", function(p) { return d3.select(this).classed("active") || p === d.source || p === d.target; });\n          }\n// Highlight the node and connected links on mouseover.\nfunction nodeMouseover(d) {\n chart.selectAll(".link").classed("active", function(p) { return d3.select(this).classed("active") || p.source === d || p.target === d; });\n            chart.selectAll(".link.active").each(function(d){linkMouseover(d)})\n            d3.select(this).classed("active", true);\n          }\n

\n\n

这个强制导向的示例使用术语源和目标\xe2\x80\x94我不认为源-目标和父-子之间有很大区别。您应该能够通过编辑上面的内容来使其工作，以便 和.each()回调.classed()仅在突出显示的节点、其（多代）子节点以及它们之间的链接上运行。

\n