search

Neilos / bihisankey

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

Diagram won't render. Maximum nodes per "type" #8

Closed ghost closed 7 years ago

ghost commented 7 years ago

I've been playing around with your example for the past couple of days and it has been working great. However it seems if you try to load in too many nodes the diagram won't render with no errors thrown. Im trying to load 135 nodes into two "type"s. If I don't include the "type" nodes it renders fine (if not a little messy) but trying to group into "type"s breaks it. Any help would be greatly appreciated.

Neilos commented 7 years ago

I'm not sure what you mean. The library should group your data by type into a hierarchical structure for you (that's the point of the library). Can you post your code?

ghost commented 7 years ago

Sorry for the delayed response. I understand that your library should group my data by type but what I was trying to explain is that for the data I have it won't group them into types. It just shows nothing at all.

I am using your example from blocks. I made a minor change to your app.js by changing the size of the svg.

So this is the data I'm trying to graph

var nodes = [
{"id":3,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":11,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":18,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":26,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":35,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":45,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":56,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":68,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":81,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":95,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":110,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":126,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":143,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":161,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":180,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":200,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":221,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":243,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":266,"type":"Data","parent":"Data","name":"UNKNOWN"},
{"id":1,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":9,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":16,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":24,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":33,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":43,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":54,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":66,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":79,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":93,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":108,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":124,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":141,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":159,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":178,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":198,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":219,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":241,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":264,"type":"GroupOne","parent":"GroupOne","name":"CIP"},
{"id":0,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":2,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":267,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":8,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":10,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":268,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":15,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":17,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":269,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":23,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":25,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":270,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":32,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":34,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":271,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":42,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":44,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":272,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":53,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":55,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":273,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":65,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":67,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":274,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":78,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":80,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":275,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":92,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":94,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":276,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":107,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":109,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":277,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":123,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":125,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":278,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":140,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":142,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":279,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":158,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":160,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":280,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":177,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":179,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":281,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":197,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":199,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":282,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":218,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":220,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":283,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":240,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":242,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":284,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":263,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":265,"type":"GroupOne","parent":"GroupOne","name":"SPEC"},
{"id":286,"type":"GroupOne","parent":"GroupOne","name":"TRANS"},
{"id":4,"type":"GroupOne","parent":"GroupOne","name":"OP"},
{"id":5,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":13,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":21,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":30,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":40,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":51,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":63,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":76,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":90,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":105,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":121,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":138,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":156,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":175,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":195,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":216,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":238,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":261,"type":"GroupOne","parent":"GroupOne","name":"VI"},
{"id":285,"type":"GroupOne","parent":"GroupOne","name":"VI"}
]

var typeNodes = [
{"id":"Data","type":"Data","parent":null,"name":"Data"},
{"id":"GroupOne","type":"GroupOne","parent":null,"name":"GroupOne"}
]

nodes.push.apply(nodes, typeNodes);

var links = [
{"target":1,"source":3,"value":20},
{"target":9,"source":11,"value":20},
{"target":16,"source":18,"value":20},
{"target":24,"source":26,"value":20},
{"target":33,"source":35,"value":20},
{"target":43,"source":45,"value":20},
{"target":54,"source":56,"value":20},
{"target":66,"source":68,"value":20},
{"target":79,"source":81,"value":20},
{"target":93,"source":95,"value":20},
{"target":108,"source":110,"value":20},
{"target":124,"source":126,"value":20},
{"target":141,"source":143,"value":20},
{"target":159,"source":161,"value":20},
{"target":178,"source":180,"value":20},
{"target":198,"source":200,"value":20},
{"target":219,"source":221,"value":20},
{"target":241,"source":243,"value":20},
{"target":264,"source":266,"value":20},
{"target":0,"source":1,"value":20},
{"target":2,"source":1,"value":20},
{"target":267,"source":1,"value":20},
{"target":8,"source":9,"value":20},
{"target":10,"source":9,"value":20},
{"target":268,"source":9,"value":20},
{"target":15,"source":16,"value":20},
{"target":17,"source":16,"value":20},
{"target":269,"source":16,"value":20},
{"target":23,"source":24,"value":20},
{"target":25,"source":24,"value":20},
{"target":270,"source":24,"value":20},
{"target":32,"source":33,"value":20},
{"target":34,"source":33,"value":20},
{"target":271,"source":33,"value":20},
{"target":42,"source":43,"value":20},
{"target":44,"source":43,"value":20},
{"target":272,"source":43,"value":20},
{"target":53,"source":54,"value":20},
{"target":55,"source":54,"value":20},
{"target":273,"source":54,"value":20},
{"target":65,"source":66,"value":20},
{"target":67,"source":66,"value":20},
{"target":274,"source":66,"value":20},
{"target":78,"source":79,"value":20},
{"target":80,"source":79,"value":20},
{"target":275,"source":79,"value":20},
{"target":92,"source":93,"value":20},
{"target":94,"source":93,"value":20},
{"target":276,"source":93,"value":20},
{"target":107,"source":108,"value":20},
{"target":109,"source":108,"value":20},
{"target":277,"source":108,"value":20},
{"target":123,"source":124,"value":20},
{"target":125,"source":124,"value":20},
{"target":278,"source":124,"value":20},
{"target":140,"source":141,"value":20},
{"target":142,"source":141,"value":20},
{"target":279,"source":141,"value":20},
{"target":158,"source":159,"value":20},
{"target":160,"source":159,"value":20},
{"target":280,"source":159,"value":20},
{"target":177,"source":178,"value":20},
{"target":179,"source":178,"value":20},
{"target":281,"source":178,"value":20},
{"target":197,"source":198,"value":20},
{"target":199,"source":198,"value":20},
{"target":282,"source":198,"value":20},
{"target":218,"source":219,"value":20},
{"target":220,"source":219,"value":20},
{"target":283,"source":219,"value":20},
{"target":240,"source":241,"value":20},
{"target":242,"source":241,"value":20},
{"target":284,"source":241,"value":20},
{"target":263,"source":264,"value":20},
{"target":265,"source":264,"value":20},
{"target":286,"source":264,"value":20},
{"target":4,"source":0,"value":20},
{"target":5,"source":2,"value":20},
{"target":4,"source":8,"value":20},
{"target":13,"source":10,"value":20},
{"target":4,"source":15,"value":20},
{"target":21,"source":17,"value":20},
{"target":4,"source":23,"value":20},
{"target":30,"source":25,"value":20},
{"target":4,"source":32,"value":20},
{"target":40,"source":34,"value":20},
{"target":4,"source":42,"value":20},
{"target":51,"source":44,"value":20},
{"target":4,"source":53,"value":20},
{"target":63,"source":55,"value":20},
{"target":4,"source":65,"value":20},
{"target":76,"source":67,"value":20},
{"target":4,"source":78,"value":20},
{"target":90,"source":80,"value":20},
{"target":4,"source":92,"value":20},
{"target":105,"source":94,"value":20},
{"target":4,"source":107,"value":20},
{"target":121,"source":109,"value":20},
{"target":4,"source":123,"value":20},
{"target":138,"source":125,"value":20},
{"target":4,"source":140,"value":20},
{"target":156,"source":142,"value":20},
{"target":4,"source":158,"value":20},
{"target":175,"source":160,"value":20},
{"target":4,"source":177,"value":20},
{"target":195,"source":179,"value":20},
{"target":4,"source":197,"value":20},
{"target":216,"source":199,"value":20},
{"target":4,"source":218,"value":20},
{"target":238,"source":220,"value":20},
{"target":4,"source":240,"value":20},
{"target":261,"source":242,"value":20},
{"target":4,"source":263,"value":20},
{"target":285,"source":265,"value":20}
]

As you can see I generate the type nodes and add them to the node list. When I run this data I get no errors but a blank page although looking at the elements it looks like the data is there just not being rendered.

if I comment out the line: nodes.push.apply(nodes, typeNodes);

and reload the page I get diagram1 so from what I can understand the data is fine but when trying to group that many nodes it seems to break your library.

You can see the full code here: app.js

ghost commented 7 years ago

So after some more investigation I have worked out what the issue is.

The order of the nodes is important! The issue was that i was adding the type nodes at the end of the array which caused them to be rendered last after making space for all the other grouped nodes. If i make the height around 4500 and scroll down to the bottom i could find the diagram. Chaging the order of the nodes so the type nodes were first in the array fixes the issue. I would suggest you add a function that checks all nodes for if they are a type node (has no parent) and render those first to prevent this issue. Or at the very least mention it in your documentation.