Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
ghost opened this issue Nov 18, 2016 · 3 comments
Closed

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

ghost opened this issue Nov 18, 2016 · 3 comments

Comments

@ghost
Copy link

ghost commented Nov 18, 2016

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
Copy link
Owner

Neilos commented Nov 18, 2016

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
Copy link
Author

ghost commented Nov 19, 2016

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
Copy link
Author

ghost commented Nov 21, 2016

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.

@ghost ghost closed this as completed Nov 21, 2016
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant