Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side.
Questions tagged [dagre]
75 questions
15
votes
1 answer
flowcharts in d3js using dagre-d3 or colajs
After seeing the quite complex TCP state diagram example of dagre-d3, I figured it would be able to resolve diagrams of similar complexity.
In the following diagram, this clearly isn't the case. If the two marked nodes were swapped, all crossings…
cdMinix
- 655
- 1
- 7
- 29
9
votes
2 answers
Rendering a family tree with d3 or cytoscape
I'm having problems generating a good looking family tree with Javascript.
Requirements:
Each child should be connected to two parents in the tree, not one as in some graphs
I've like spouses to be next to each other in the tree (same vertical…
Emil Stenström
- 13,329
- 8
- 53
- 75
6
votes
2 answers
Is there a way to display a node label at the top inside the node?
I am creating a graph using cytoscape.js and I have compounded nodes which are inside the parent node. I would like to have the title of the main/parent node at the top of the node but inside the node. Is that possible in cytoscape?
I have tried…
Learn AspNet
- 1,192
- 3
- 34
- 74
5
votes
2 answers
React component with Dagre-D3 not drawing correctly
I converted this Dagre-D3 demo to a React component. The code is below.
import React from 'react'
import d3 from 'd3'
import dagreD3 from 'dagre-d3'
export default class D3Chart extends React.Component {
constructor () {
super();
…
wonderful world
- 10,969
- 20
- 97
- 194
5
votes
2 answers
Drawing directed acyclic graphs in a web application - only strange approach available?
we're currently building a web application (AngularJS) which needs to draw directed acyclic graphs (up to 1000 nodes, up to 10000 edges) based on dynamically created data.
Since over a year I am looking for a library/tool which is calculating the…
LBA
- 3,859
- 2
- 21
- 60
4
votes
3 answers
React Cytoscape JS : All nodes are accumulated in one position
When creating a path using dagre, the whole nodes accumulate in one position. How can we set default positions for nodes ( Cytoscape js without react works fine) instead of setting position separately using position attribute for nodes.
const layout…
Sobhin Chandran
- 41
- 2
4
votes
0 answers
Layouting a directed graph: edges crossing nodes
I'm currently trying to display a process flow with Cytoscape.js and cytoscape-dagre. While this combination does a pretty good job for simple processes (or graphs), I can't solve the problem of edges crossing nodes.
The following is rendered by the…
Newlukai
- 549
- 5
- 16
4
votes
2 answers
How to use a JointJS Directed Graph when cells are embedded?
Tonight, I tried performing the directed graph on an example from the JointJS website. See the Discrete Event example:
http://resources.jointjs.com/demos/devs
Even though the source code link is not mapped correctly, I found it…
bmac
- 41
- 4
4
votes
1 answer
how to get horizontal view by using Dagre?
I am willing to using Dagre in my html.
Here's my js code:
var g = new dagreD3.graphlib.Graph()
.setGraph({})
.setDefaultEdgeLabel(function() { return {}; });
var i = 0;
var nodes =…
Dragon
- 487
- 4
- 17
3
votes
1 answer
How to align the jointjs graph to the center / middle of the paper horizontally with the flow direction from top to bottom?
I have a graph generated using JointJs and it uses Dagre Layout provided by jointjs. Currently, the graph gets aligned from Top To Bottom which is the correct way but then the complete graph gets aligned to the left of the paper.
I need the graph to…
Tofiq Quadri
- 379
- 5
- 16
3
votes
0 answers
Dagre-d3 graphlib :How to dynamically add new nodes into graph without redraw the whole graph?
I'm currently using dagre-d3 and graphlib API to draw a directed graph. The language I use is typescript. My use case is I don't want to render the whole graph at one time. What I need to implement is show some nodes at first and then dynamically…
L.L
- 126
- 1
- 1
- 8
3
votes
0 answers
How to connect node to group instead of child node?
I am creating a graph with nested nodes by using 'D3' and 'dagre' library.
I want to connect node 'Level 1' to 'Middle Level' and then 'Middle Level' to 'Level 3'.
But when I use 'g.setEdge' I got the following error:
Cannot set property 'rank' of…
Ali J.
- 47
- 4
3
votes
1 answer
dagre-d3- make the long text to fit inside node
In the setNode we can specify the html as well. if i mention width and height, and if it a long text, it is moving out.
g.setNode(0, {
labelType: "html",
label: '
test data…
Sam
- 2,275
- 9
- 30
- 53
3
votes
0 answers
How to improve Dagre js calculation performance
I'm using Dagre to generate graph coordinates on the frontend for a graph of around 700 nodes & 700 edges and it is currently taking around 1.5 to 2 seconds to generate (this is before rendering). How should I go about optimising this, are there any…
Dave
- 1,051
- 1
- 10
- 20
3
votes
1 answer
How to render dagre-d3 node label with the correct height?
Based on this example, I use dagre-d3 to render a graph within an angularjs' directive.
It works fine with simple label on node:
nodes.forEach(function(node) {
g.setNode(node.num, {
labelType: "html",
label: ""+node.name+"",
…
Xaving
- 329
- 1
- 11