我试图突出显示其目标节点的所有连接链接和链接,直到布局结束.
第一级突出显示可以轻松实现如下 –
在节点单击时,调用highlight_paths(1);
function highlight_paths(stroke_opacity) {
return function(d,i){
d.sourceLinks.forEach(function(srcLnk){
d3.select("#link"+srcLnk.id).style("stroke-opacity",stroke_opacity);
});
d.targetLinks.forEach(function(srcLnk){
d3.select("#link"+srcLnk.id).style("stroke-opacity",stroke_opacity);
});
}
}
但我还不能正确编写递归算法来获取每个连接源和放大器的所有sourceLinks和targetLinks.目标节点.
所有的想法都很感激！
谢谢.
解决方法
我正在浏览sankey布局代码,并找到了遍历布局节点的广度优先搜索实现.关于BFS的一些知识 –
http://www.cse.ohio-state.edu/~gurari/course/cis680/cis680Ch14.html
纯粹基于此,这里是在两个方向上突出显示点击节点的所有路径的功能 – 前进(目标)和后退(源)
希望这有助于某人！
工作实例 – http://bl.ocks.org/git-ashish/8959771
function highlight_node_links(node,i){
var remainingNodes=[],nextNodes=[];
var stroke_opacity = 0;
if( d3.select(this).attr("data-clicked") == "1" ){
d3.select(this).attr("data-clicked","0");
stroke_opacity = 0.2;
}else{
d3.select(this).attr("data-clicked","1");
stroke_opacity = 0.5;
}
var traverse = [{
linkType : "sourceLinks",nodeType : "target"
},{
linkType : "targetLinks",nodeType : "source"
}];
traverse.forEach(function(step){
node[step.linkType].forEach(function(link) {
remainingNodes.push(link[step.nodeType]);
highlight_link(link.id,stroke_opacity);
});
while (remainingNodes.length) {
nextNodes = [];
remainingNodes.forEach(function(node) {
node[step.linkType].forEach(function(link) {
nextNodes.push(link[step.nodeType]);
highlight_link(link.id,stroke_opacity);
});
});
remainingNodes = nextNodes;
}
});
}
function highlight_link(id,opacity){
d3.select("#link-"+id).style("stroke-opacity",opacity);
}