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
19
votes
1 answer

How are svg, d3, dagre, dagre-d3 and graphlib dependent on each other?

I have used dagre for drawing directed graphs but I'm trying to understand how svg, d3, dagre and graphlib are dependent on each other? Basically, where one stops and the other starts. I'll try and point out what I could gather with my limited…
IAMTubby
  • 1,627
  • 4
  • 28
  • 40
17
votes
2 answers

Directed acyclic graph using d3.js without DOT

I am trying to draw directed acyclic graph using d3.js. While searching for the layout, I came across Dagre but it seems to be of less use as I do not want to use DOT based code anywhere. If anyone knows about pure Javascript solution for this or…
A.G.
  • 734
  • 2
  • 8
  • 27
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
12
votes
2 answers

dagre-d3 IE workaround for SVG foreignObject element?

I'm an undergrad co-op and am currently developing a webpage project for my team. In the beginning, I chose to use dagre-d3 library to construct graphs, and they work fine on Chrome. Then I realize that ForeignObject element in SVG doesn't work on…
IT Newbie
  • 121
  • 1
  • 4
11
votes
1 answer

Resizing d3 / dagre-d3 svg to show all contents

I'm trying to create DAGs with dagre-d3. The data for these DAGs comes from a database, are different for each DAG and as such, I do not know the width/height to give the containing svg before adding all nodes and edges to the graph. So ideally I'd…
Dennis Kaarsemaker
  • 286
  • 2
  • 11
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
7
votes
0 answers

Node overlapping edge at directed graph

is it possible that the node does not overlap the edge? I use dagre d3 for the graph. For nodes i use bootstrap. When it is not automatically possible, how can i do it manually? This is an example graph. I need a gerneral solution not specially for…
user7222571
7
votes
2 answers

Re-render HTML after zoom using Dagre d3

Edit I have found a solution involving using a slightly older version of the dagre-d3 library (4.11). If anyone can find the problem with the latest version, that would help too. Thank you I'm using Dagre d3 to draw some graphs. When I initially…
db2791
  • 1,040
  • 6
  • 17
  • 30
6
votes
4 answers

dagre-d3 how to click node and run an event after that

I am using dagre-d3.js to create hierarchical graph. Now I have a requirement to make the node clickable and perform a function. I am unable to achieve that. current some of my code looks like var g = new…
user1094183
  • 181
  • 1
  • 3
  • 12
5
votes
0 answers

Drag Node with Dagre-D3

I implemented the functionality, that you can pan and zoom the whole graph but also being able to drag one specific node. My problem at this point is, that I can't find a way how to update the edges while dragging a node. Here you can find a minimal…
Simon S.
  • 563
  • 4
  • 21
4
votes
1 answer

Diagram is not rendering - Dagre-d3

I converted this Dagre-D3 demo to a React component. The code I used is shown below: import React from 'react'; import * as d3 from "d3"; import * as dagreD3 from 'dagre-d3'; import * as dagre from "dagre"; export default class KafkaFlow extends…
Janu Ramesh
  • 43
  • 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
4
votes
2 answers

Dagre-D3 graph. Can egde path be customized?

I've managed to create some graph using dagre-d3 graph layout library. The library works wonderful but seems a bit lacking in documentation. My graph really looks like this example:…
ike3
  • 1,760
  • 1
  • 17
  • 26
4
votes
1 answer

Maintaining relative ordering when adding nodes to a layered graph in Dagre

I have created a trivial Dagre example to dynamically add nodes upon clicking existing nodes in the graph. However, the rerendering creates a different relative ordering within the same layer. Is there anyway around this problem? Fiddle is available…
user1556435
  • 966
  • 1
  • 10
  • 22
4
votes
0 answers

How can I reset the graph position and scale in dagre-d3

In some cases I need to reload the graph and redraw a graph and set it into initial position and scale without refresh the page(using jquery and ajax). What I used is the example code on https://github.com/cpettitt/dagre-d3 (not the interactive one,…
user3458198
  • 311
  • 1
  • 8
1
2 3 4 5 6