分层边缘捆绑 2 方式 - 链接颜色答案

【问题标题】：Hierarchical edge bundling 2 way - link colour分层边缘捆绑 2 方式 - 链接颜色
【发布时间】：2015-02-02 19:49:11
【问题描述】：

这是对这个问题的跟进： D3 Dynamic hierarchical edge bundling - 2 way import

原来的问题已经解决，显示在http://jsfiddle.net/w2rfwokx/1/ 即如果节点 1 和节点 2 都相互导入，则有一个橙色链接。但是这个分辨率似乎有一个问题，这在http://jsfiddle.net/w2rfwokx/3/中显示的这个新数据集中变得很明显@

当节点 1 和节点 2 都相互导入时，当节点 1 高亮显示时，节点 2 为橙色，这是它需要的样子，但链接不是。

我猜代码没有考虑复杂的数据集。在这个复杂的数据集中，节点 1 导入节点 2，节点 2 导入节点 1，节点 3 导入节点 2。

我可以发现这个代码块中唯一链接数组的构造需要改变

var unique_links = links.reduce(function(p,c) {
    var index=p.map(function(d,i) { if(d.source===c.target && d.target===c.source) return i;}).shift();
    if(!isNaN(index)) p[index].both=true; else p.push(c);
    return p;
  },[]);

虽然我很难看到有什么变化。我仍在学习 d3.js，我的主要目的是将其应用于流程管理

任何指针都会有帮助

【问题讨论】：

标签： javascript svg d3.js colors bundle-layout

【解决方案1】：

链接未正确标记为“双向”。

此代码段不正确：

d.both = unique_links.filter(function(v) { if (v.source===d.source && v.target===d.target) return v.both; }).shift();

})

应该是这样的：

d.both = unique_links.filter(function (v) {
    if (v.source === d.target && v.target === d.source){
        return v.both = d.both = true;
    }
})

这是jsfiddle。以及演示屏幕动画：

【讨论】：