Neilos / bihisankey

A d3 javascript library/plugin for drawing bi-directional hierarchical sankey diagrams
68 stars 24 forks source link

how to unmerge links that comes from the same source to the same target #10

Closed ChenOct closed 7 years ago

ChenOct commented 7 years ago

Hey, Those are my nodes and links.

`var exampleNodes = [ { "type": "Asset", "id": "a", "parent": null, "name": "Assets" }, { "type": "Expense", "id": "ex", "parent": null, "number": "ex", "name": "Expenses" } ]

var exampleLinks = [ { "source": "ex", "target": "a", "value": 10 }, { "source": "ex", "target": "a", "value": 10 } ]`

I need to create two links from the same source to the same target, but I need to show each of them as a link. I saw in 'bihisankey.js' that there is a 'mergeLinks' function. Can I unmerge the links?

Thanks, Chen.

Neilos commented 7 years ago

Short answer is no.

Just to be clear what this is doing...

If you have two nodes: A and B...

var someNodes = [
  {"type" => "A", "id" => "A", "parent" => null, "name" => "Node A"},
  {"type" => "B", "id" => "B", "parent" => null, "name" => "Node B"},
]

... and you specify in your data a link of value 20 going from node A to node B and also specify elsewhere in your data that a link of value 30 also going from node A to node B and perhaps also a link of value 5 going in the other direction (i,e, from node B to node A)....

var someLinks = [
  {source: "A", target: "B", value: 20},
  {source: "A", target: "B", value: 30},
  {source: "B", target: "A", value: 5}
]

...then the mergeLinks function calculate the net of these values as if you're link data were instead:

var someLinks = [
  {source: "A", target: "B", value: 45}
]

If you don't want your links to be merged at all, you could fork the project and delete line 673 (https://github.com/Neilos/bihisankey/blob/master/bihisankey.js#L673).

ChenOct commented 7 years ago

Thanks for your quick answer. I did it, but unfortunately I still get on the screen just one link. I need two link in the screen from 'Node A' to 'Node B'. Attached pic.

untitled

Thanks.

Neilos commented 7 years ago

Sorry that hasn't fixed your problem. In that case, I suspect the rest of the code is assuming only one link between a pair of nodes. You might find that both links are there but are being displayed on top of one another (if that helps).

I don't think I'll be supporting this requirement going forward, but I hope you find a solution.

northam commented 7 years ago

@ChenOct Links between the same source and target are not displayed because they are mapped by not unique id: link.id = link.source + '-' + link.target You can make it unique by adding an increment inside of the function computeNodeLinks(): link.id = link.source + '-' + link.target + (linkIdIncrement++); Don't forget to declare it with initial value: linkIdIncrement = 0 in the top declaration area in bihisankey.js. And of course, comment out //mergeLinks();. Result I have after these changes: screen shot 2017-05-03 at 2 15 54 pm

UPDATE: I added this feature to my fork. Live example: http://kardash.net/styled_sankey/test.html

ChenOct commented 7 years ago

@Neilos @northam Thank you both. The solution to add var linkIdIncrement and comment out mergeLinks() function works.