Question

我正在使用d3.js的强制布局，我需要在图中显示根的路径。在点击“任务10”节点时，它应该显示路径（任务10->任务6->任务4-＆gt;任务1）。 Root将被识别为相同的源和目标，但此信息仅传递给数据。我的数据包含具有节点路径信息的“RootPath”，例如“任务10”RootPath是[“任务6”，“任务4”，“任务1”]。

我在这里可以看到完整的图表代码http://plnkr.co/edit/EvpNC6B5DBWczNXKiL82?p=preview。

我正在编写下面的方法，以便在点击特定节点时它将显示根路径。但目前它只显示1个节点。我不知道如何迭代所有其他节点列表。

  function rootPath(d){
    var curNodeDetail = d.details.RootPath;
    var source=[],target=[],i=0,j=0;
    source[i] = d.name;
    target[i] = curNodeDetail[i];
    links.style("stroke-opacity", function(o) {
            if(source[i] === o.source.name && target[i] === o.target.name){
                source[i+1] = curNodeDetail[i];
                target[i+1] = curNodeDetail[i+1];
                i++;
                return  1;      
            }
            else    
                return 0.1;     
        })
        .attr("marker-end", function(o){
                if(source[j] === o.source.name && target[j] === o.target.name){
                        j++;
                        return "url(#arrowhead)";
                }
                else
                    return "url(#arrowhead2)";
        });
  }

Answer 1

将d.details.rootpath转换为d3.set并添加当前节点，然后询问每个链接以查看两端是否属于该集合的一部分。

这适用于您的链接，但您必须为节点执行相同操作 - ＆gt;

var curNodeDetail = d.details.RootPath;
var rootMap = d3.set (curNodeDetail);
rootMap.add(d.name);
links.style("stroke-opacity", function(o) {
        return (rootMap.has(o.source.name) && rootMap.has (o.target.name)) ? 1 : 0.1;
    })
    .attr("marker-end", function(o){
            return (rootMap.has(o.source.name) && rootMap.has (o.target.name)) ? "url(#arrowhead)" : "url(#arrowhead2)";
    });

}

Answer 2

以下功能非常有用： -

function rootPath(d){
    var curNodeDetail = d.details.RootPath;
    var rootMap = rootPathItinerary(d.name,curNodeDetail);
    links.style("stroke-opacity", function(o) {
            return (rootMap.has(o.source.name) && (rootMap.get(o.source.name) === o.target.name)) ? 1 : 0.1;
    })
    .attr("marker-end", function(o){
            return (rootMap.has(o.source.name) && (rootMap.get(o.source.name) === o.target.name)) ? "url(#arrowhead)" : "url(#arrowhead2)";
    });
}

function rootPathItinerary(node,rootPathDet){
    var i=0;
    var map = d3.map();
    map.set(node,rootPathDet[i]);//10,6
    while(i+1 <rootPathDet.length){ //6,4,1
            map.set(rootPathDet[i],rootPathDet[i+1]) ; //6,4 ; 4,1
            i++;
    }
    return map;
}

D3.js强制布局：显示任何节点

2 个答案: