-
Notifications
You must be signed in to change notification settings - Fork 24
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
Comments
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? |
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: and reload the page I get You can see the full code here: app.js |
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. |
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.
The text was updated successfully, but these errors were encountered: