小编Joy*_*bay的帖子

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

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

在此输入图像描述

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

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 …
Run Code Online (Sandbox Code Playgroud)

parent highlight hover d3.js force-layout

11
推荐指数
1
解决办法
9481
查看次数

标签 统计

d3.js ×1

force-layout ×1

highlight ×1

hover ×1

parent ×1