Comments (3)
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?
from bihisankey.
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 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
from bihisankey.
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.
from bihisankey.
Related Issues (16)
- app.js mouseenter/mouseleave processing needs blocked during transition animations HOT 1
- how to unmerge links that comes from the same source to the same target HOT 5
- showHideChildren in chremo not working HOT 3
- Force min and max X & Y based on node properties HOT 1
- Double click node cannot expand. HOT 5
- arrowheads do not render in internet explorer
- Parent collapser HOT 1
- How can I customize the node shape from rectangle? HOT 2
- YsacleFactor and YPosition HOT 1
- Is there a license? HOT 1
- Sort Nodes HOT 1
- How can I sort the nodes in order or by weight, or even once?
- How do you control the distance between nodes? HOT 2
- Counts concatenating as strings instead of integers
- Not compatible with D3 v4? HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bihisankey.