Comments (9)
Thanks for submitting this, I should fix that external error string. The problem is that decrossOpt
, used in the example as .decross(d3.decrossOpt())
doesn't work for large graphs. If you remove that line and go to the default, it should work for large graphs.
I'll keep this open to adjust the error text
from d3-dag.
@troyinsight Yeah, I know the api is sometimes not obvious. I'm working on an update. Have you tried:
sugiyama().decross(decrossOpt().large("medium"))
from d3-dag.
Perfect, thank you Erik!
from d3-dag.
Documentation on this should be more up to date and easier to understand.
Feel free to reopen if you don't think this has been addressed.
from d3-dag.
HI @erikbrinkman , As suggested if I comment out the line. .decross(d3.decrossOpt()) The error goes away but the Graph is still not getting rendered. And only one single data point is rendered and Another Observation is that If the NodeId in my Case is a String and if the String Length is long then it doesnt render the graph and if I reduce the NodeId length its rendering. Any suggestions on this issue will also be helpful.
from d3-dag.
Can you give me more information? "the graph doesn't render" isn't really enough for me to figure out what's going wrong. My guess is that it is rendering, and other aspects are making it hard to view. Please check the DOM to see if the elements are there, what their size is, if they're in the svg viewport, etc.
As for the node ids, the example is set up so that the node ids become the label. If the label is really long then it will naturally result in a strange layout, so I would decide what it is you want it to render as and then fix it. Also note, that this renders nodes with a fixed size. If you want long labels to fit in the nodes, you'll want to dynamically adjust the node size.
One final thing I'll mention is that this library is not intended to be a drop in replacement for dot
. I intend there to be some manual effort to actually define the layout, in the same way that d3 is not an off the shelf plotting library.
from d3-dag.
Browser is running out of memory for even 50 nodes. Graph rendering takes time for 30 nodes.
Data used for graph plotting: https://codepen.io/ihsahs/pen/xxjmKmE?editors=1010
Please check.
from d3-dag.
The problem here isn't so much with the number of nodes as it is the number of edges. The places where this was dying was in trying to pick points for the edges. Changing coord
to coordGreedy
as in here (and updating library to 11.5) allowed the example data to render as:
It seems like this would look better if greedy did a pass up and down to make it create layouts closer to what coordSimplex creates. Howevere, I would generally say dags this large (and dense) are difficult to render in an intuitive way, and even less likely as you get into thousands of nodes. I imagine graph viz produces a slightly better layout as they tend to space nodes father away. However, if this is what you want to layout, and the graph is this dense, I'd ask what you hope to gain from the visualization. Potentially layouts like (d3-chord)[https://github.com/d3/d3-chord] might be better. Alternatively maybe you want some clustering approach to extract higher level structures, or potentially you want look at some of the discussion around dynamic layouts that allow exploration without trying to render the entire dag.
Notes to self
- Adjust error text on decrossOpt to be more clear how to remedy (e.g. don't ignore but switch to a different decross rendering)
- Modify
coordGreedy
to go both directions / and potentially other constraints that will make result closer tocoordSimplex
- Add density warning by default for
sugiyama
(and other layouts) explaining that dense graphs don't render well with this technique - Add warnings checks to other expensive operations (like coordSimplex)
from d3-dag.
Hi @erikbrinkman. Sorry, if I'm just being dumb, but I can't figure out how to enable 'medium' graphs with decrossOpt. I've been doing some testing with a graphs that has 44 nodes. It really needs decrossOpt and I beleive it would render quickly, but bombs out with the 'size of dag to decrossOpt is too large...' error.
from d3-dag.
Related Issues (20)
- Basic TypeScript type check error HOT 6
- Tips for writing my own layering HOT 2
- General question about node ordering HOT 2
- Specific key order appears to cause decrossOpt to hang HOT 4
- TS: Errors with typescript version 4.9.4 HOT 3
- example code not runable HOT 4
- How to plot a horizonal sugiyama graph HOT 1
- Guidance on Implementing Radial Drawing with d3-dag's Sugiyama Algorithm HOT 3
- Implement Brandes/Kรถpf Coordinate Assignment
- Expand d3-dag to handle multiple paths from parent->child HOT 4
- Dynamic nodeSize? HOT 1
- TS, export SugiNode<NodeDatum = unknown, LinkDatum = unknown> ? HOT 3
- TS Sugestion(?) HOT 4
- Possible linking bug in docs HOT 3
- elkjs, external layout algorithms? HOT 1
- is it possible to establish node order explicitly in grid? HOT 8
- Support for TypeScript <4.5
- How to extend DagNode in vanilla js? HOT 6
- Layout direction HOT 2
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 d3-dag.