Comments (12)
It depends on what you need to do. In principle, clusters are just laid out first, so if you want to create a clustered layout, you could just do the layout hierarchically. First layout each cluster. Then replace them with single nodes and lay those out. You'll need to do some adjustment so everything fits, but that's how I would approach this from a hacking perspective.
from d3-dag.
@gareth-lloyd it's reasonable to not know about this, as it's kind of hidden in the library, but the simplex layering operator has a rank option. I don't think it's super tested (and doesn't appear to be well documented either), but essentially you can define a rank for each node, nodes with the same rank will get the same layer, otherwise, nodes with higher ranks will be further down. If that is too strict for you, you then I would recommend copying the source code and tweaking it to just enforce equality on the nodes you want to be equal. Note, this only works for simplex layering, as the other operators don't really have a way to enforce this constraint.
Also, if you have further questions about this, it's not really related to this type of clustering, so I would open up a new issue to keep things separate.
from d3-dag.
example http://viz-js.com/
from d3-dag.
I don't have a direct plan to implement that, but I'm not necessarily opposed. I intentionally modeled this after d3-hierarchy
and not graphviz
and that makes some of this more difficult.
If we push forward with the idea, there are a number of questions that come up in regard to the design:
- I don't see an obvious elegant way to support clustering in the api. The nodes could have a cluster id field, and everything with the same defined cluster id gets counted as a cluster. I don't love this, but it's a possible way. An alternative would be to specify the groups when calling layout.
- In d3 style, this is only really designed to compute the positions. Actually deciding how to do the layout still falls under the user. In that regard, do you see wanting to attach some metadata to the cluster to specify something like a bounding box? Or will it only modify the positions, and any other group layout will have to be done by the user. i.e. they could compute the bounding box by using
d3.extent
on the nodes x and y. - The most pressing question is how to do the layout. Taking each dag subgraph independently and laying them out shouldn't be too bad, but the current abstractions rely on nodes being singularities, and doesn't support an obvious way to handle clusters that can span multiple rows or columns. I've mulled how to extend these abstractions to clusters, and nothing has come to me so far. If you know or want to look into how graphviz does this, I'd be interested. However, I imagine it would take an almost complete redesign of the layout portion of this library π.
from d3-dag.
Ok, fair enough. It not so easy to add clustering support. Maybe you have some ideas how can we get layout with clusters maybe with some kind of hack ?
from d3-dag.
Here is a nice approach about how to render compound directed graphs, which is I think a bit different from first layouting clusters.
https://publikationen.sulb.uni-saarland.de/bitstream/20.500.11880/25862/1/tr-A03-96.pdf
from d3-dag.
@ghigi123 Thanks for the link. I think support for this is definitely worth it, although I wonder how much it's worth reimplementing all of this, or if it makes more sense to find a way to use something like graphviz on the backend.
Also, I'm not sure when / if I will have time to work on support for something like clustering.
from d3-dag.
I would second support for this - sample use case: https://play.hpccsystems.com:18010/?Wuid=W20190503-171109&GraphName=graph2&SafeMode=false&Widget=GraphTree7Widget
from d3-dag.
I have a limited version of clustering that I want to implement, and I would be tremendously grateful for any pointers on where to start.
I have a DAG representing a family tree. Individuals can be in unions. In order to lay this out in a way that makes intuitive sense to the viewer, an individual needs to be directly adjacent to their partner in the union.
So the cluster is usually just two nodes, both at the same level of the graph, connected by a "produced children together" relationship, rather than a parent child relationship.
I have tried replacing the pair of individuals with a single node representing both of them in the union, but that requires me to alter those individual's relationships with their parents. The 4 parents of the couple now have a parent-relationship to the union rather than the individuals they spawned.
I would like to instead force the partners in a union to be drawn side by side, and maintain only parent-child relationships between individuals.
TLDR - can I force two nodes which I know to be related (not as parent/child) to be drawn adjacent to one another?
Thanks in advance for any help you can give.
from d3-dag.
I did some more experimentation. I can define union nodes that express the relationship between two individuals, and then express the relationship to their children as a parent-child relationship from the union to each child.
parent A -- Union -- parent B
|
--------------
| |
Child C Child D
With an appropriate decrossing operator, this makes it far more likely that parents will be drawn adjacent. However, it has other problems.
The trouble then is that A and B's relationship to Union is parent-child, not sibling, so union is drawn at the next level of the graph. The arrangement is like this:
parent A parent B
| |
---- Union ------
|
-----------
| |
Child C Child D
Is there a way to force all parent to union relationships to share the same level?
from d3-dag.
Is there a way to force all parent to union relationships to share the same level?
I think I've answered my own question on this by playing around with layering operators. The library explicitly protects against a parent-child relationship occurring on the same level.
That leaves me to explore the other question: "can I force two nodes which I know to be related (not as parent/child) to be drawn adjacent to one another?"
from d3-dag.
This has been open for five years, and supporting it would still be very difficult and I have no direct plans to. If you're still looking for clustering support you've hopefully moved on long ago π’
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
- Error: size of dag to decrossOpt is too large and will likely crash instead of complete, enable "large" grahps to run anyway HOT 9
- 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.