1

This is a followup on this question: D3 Dynamic hierarchical edge bundling - 2 way import

The original problem was resolved and is shown in http://jsfiddle.net/w2rfwokx/1/ i.e there is an orange link in case node 1 and node 2 both import each other. But there seems to be an issue with this resolution, which becomes apparent in this new data set shown in http://jsfiddle.net/w2rfwokx/3/

When node 1 and node 2 both import each other, and when node 1 is highlighted, node 2 is in orange, which is how it needs to be, but the link is not.

enter image description here

I guess the code is not taking into account the complex data set. In this complex data set, node 1 imports node 2, node 2 imports node 1 and node 3, node 3 imports node 2.

I can figure out that construction of unique links array in this code block needs change

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;
  },[]);

Though i am struggling to see what change. I am still learning d3.js and my primary purpose is application of this to process management

Any pointers would be helpful

Community
  • 1
  • 1
Ratnakar Vellanki
  • 219
  • 1
  • 2
  • 13

1 Answers1

0

The links were not properly marked as "both"-directional.

This code segment is incorrect:

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

})

It should look like this:

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

This is jsfiddle. And demo screen animation:

enter image description here

VividD
  • 10,456
  • 6
  • 64
  • 111