我试图突出显示所有连接的链接及其目标节点的链接,直到布局结束。
第一级突出显示可以轻松实现,如下所示 -
单击节点时,调用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。
所有的想法都值得赞赏!
Thanks.
我正在查看 sankey 布局代码,并找到了用于遍历布局节点的广度优先搜索实现。关于 BFS 的一些知识在这里 -http://www.cse.ohio-state.edu/~gurari/course/cis680/cis680Ch14.html
纯粹基于此,这里的函数可以突出显示从单击的节点开始的两个方向的所有路径 - 向前(目标)和向后(源)
希望这对某人有帮助!
工作示例 -
http://bl.ocks.org/git-ashish/8959771
https://observablehq.com/@git-ashish/sankey-diagram
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);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)