Stack Overflow
Stack Overflow

Questions tagged [dagre-d3]

Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side. The dagre-d3 library acts as a front-end to dagre, providding actual rendering using D3

88 questions
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
3
votes
1 answer

Bootstrap in Dagre D3 is not correctly rendering

Hello i have a problem with rendering Bootstrap with Dagre D3 in JavaScript. Dagre D3 is a Libary based on D3. First Problem is that the star-glyphicon is only in the first node, but not in the second node. Why? Second Problem is that the Dropdown…
user7222571
3
votes
0 answers

How to create collapsible using digraph or D3

I want to create collapsible digraph using dagre.js. But it generates static graphs with no click events. I want to toggle children of a node when user click on the graph node. any help will be appreciated..
Coderzz
  • 55
  • 7
3
votes
3 answers

Edge positioning in dagre-d3

I am using dagre-d3 and created this sample graph. Is it possible to avoid the crossing problem in the sample marked with 1. Maybe this is possible to mark the edge connection to the bottom of the node. I am not sure how to achieve this…
Zeeshan
  • 351
  • 4
  • 8
3
votes
0 answers

Draw an ERM with Dagre-D3

I try to create an ERM with Dagre-D3. The relations should be displayed directly between the entities attributes. (see screenshot). By grouping the attributes in parent nodes I'm quite there, but some of the algorithms in the dagre graphlib separate…
byMike
  • 319
  • 2
  • 9
3
votes
3 answers

Increasing clickable area of an edge in D3 diagram

I have a graph being made by d3, with dagre-d3 sitting on top of it for drawing directed graphs. This gives me what I expect for rendering the graph: To edit the data building the graph, each element is click-able. This is fine for the cases where…
Matt Sieker
  • 9,349
  • 2
  • 25
  • 43
2
votes
0 answers

How to maintain nodes at the same level in dagre-d3

I have created a simple flow chart using dagreD3, please check the example here I have few set of nodes graph.setNode('a', {label: 'a', height: 20, width: 40}) graph.setNode('b', {label: 'b', height: 20, width: 40}) graph.setNode('c', {label:…
Sam
  • 2,275
  • 9
  • 30
  • 53
2
votes
0 answers

Add custom react component as label in Dagre D3

I'm using dagre-d3 library for creating a flow path. I need to have custom component for every label but its not rendering react components, it however does render properly if the label is simple html. What do I need to do? Following is a sample of…
Kartik Pawar
  • 35
  • 1
  • 5
2
votes
0 answers

render graph using react components

I would like to create a DAG letting react take care of the rendering (using hooks for state management) and d3 only doing the calculations. Using dagre to calculate x, y and point coordinates works fine. Now i want to add arrows to the edges and…
Flimzy_Programmer
  • 515
  • 5
  • 16
2
votes
0 answers

Rendering SVG in new tab opened with HTML

I'm using the library dagre-d3 to render a graph as an SVG. Basically, I need to render such an SVG within a newly opened tab, so that when this script is ran, it opens a new tab that displays the SVG rendered by dagre-d3. I've already tried using…
pxsantos
  • 21
  • 2
1
2
3 4 5 6