Stack Overflow
Stack Overflow

Questions tagged [dagre]

Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side.

75 questions
1
vote
1 answer

dagre with cytoscape wont work

How to use dagre layout in cytoscape.js to draw a simple tree. I am putting layout{ name: ‘dagre’} and added dagre.js but not works.With arbor.js it works but I would like to use dagre to see the tree results. I'm newbie with javascript. Many thanks…
Luis perez
  • 133
  • 3
  • 17
1
vote
0 answers

Position of a custom shape using dagre

I'm trying to create a custom shape and set x and y axis on the svg, so far I got it done but for on top of my element I have a transform attribute that belongs to a group (g) that references the node, I tried to change the attribute setting a…
pedrommuller
  • 15,741
  • 10
  • 76
  • 126
1
vote
0 answers

How to require Dagre in NodeJS

I'm trying to require Dagre in Node (following the documentation on the Dagre wiki) after installing Dagre with NPM. Why isn't this working? $ npm install dagre dagre@0.5.0 node_modules/dagre ├── graphlib@0.8.0 └── lodash@2.4.1 $ echo -e "var dagre…
Jerrik Osvald Ansgar
  • 51
  • 2
0
votes
0 answers

React flow graph ranks

I am using react-flow with dagrejs for the layout, and facing a challenge I'm stuck with. Each node in my graph has in it's 'data' object a key of 'datetime'(timestamp). I need to add to the layout logic, that nodes will also be positioned…
nadiTime
  • 151
  • 1
  • 9
0
votes
1 answer

Using the D2 Diagraming Language, How Do I render a set of shapes between two other shapes

I'm using the following D2 Diagramming Code on the D2 Playground with the Dagre rendering engine to represent a partition layout: nvme0n1: { shape: cylinder p1 -> p2 -> p3 } nvme1n1: { shape: cylinder width: 20 p1 -> p2 -> p3 } RAID1: { …
djsumdog
  • 2,560
  • 1
  • 29
  • 55
0
votes
0 answers

getting error TypeError: labelSvg.node(...).getBBox is not a function in d3.js graph

I am dynamically rendering nodes and edges. And it is working correctly. But in test cases getting error 'TypeError: labelSvg.node(...).getBBox is not a function' I am using dagreD3 to render directional graph. Note: Not using getBBox explicitly in…
Suraj Bande
  • 89
  • 2
  • 9
0
votes
1 answer

How can I include dagre/graphlib in a vue.js site built with vite

I want to include dagre (or graphlib, get same issues) in a vite based vue project but hitting issues at either runtime or build time depending on options I've tried. ➜ npm create vite@latest ✔ Project name: … demo ✔ Select a framework: › vue ✔…
w08r
  • 1,639
  • 13
  • 14
0
votes
1 answer

Implement force-directed graph in next js

I'm trying to create a force-directed graph for mapping the interactions between courses in an institution. Using Next JS + TypeScript for my frontend. Have tried several attempts at charting this out using react-flow, dagre, vis-network but am…
Ankit Sanghvi
  • 467
  • 5
  • 18
0
votes
1 answer

Asynchronous JS: Button needs to be pressed twice to execute onClick(). The onClick() triggers 2 functions but only one is executed on 1st click

I have an issue regarding an application that I am working on. I have a button that is triggering 2 function. One of them is a setState which changes the direction of a dagre graph and the other one is a function that React-flow-renderer provides…
botana_dev
  • 418
  • 4
  • 16
0
votes
1 answer

React-flow & dare: reactFlowInstance.fitView() fits the instance in the screen after 2nd button click. (1st only changes the direction of the graph)

I have tried different ways of implementing this beauty, but it doesn't seem to work. My problem is that when I hit the button, I want to change the layout of the graph, which happens and I am glad for it, but I also want my graph to be centered…
botana_dev
  • 418
  • 4
  • 16
0
votes
0 answers

Handles (Edge source & target) aren't created automatically with Dagre and React-Flow. (Tree visualization)

I am creating a component tree visualisation with Dagre and React-flow, and unfortunately I face some difficulties. The edges are correct, all have the right identifiers for the source and the target, but if I don't use the Handle component provided…
botana_dev
  • 418
  • 4
  • 16
0
votes
1 answer

Transform Tree in Array to display with React Flow and Dagre

I have this tree: const tree = { "1": "root", "children": [ { "2": "similar values", "children": [ { "3": "similar values info", "children": [ { …
r342346
  • 119
  • 1
  • 15
0
votes
1 answer

Cytoscape Fit function is not working if we have dynamic height calculated using number of nodes

I am using Cytoscape Dagre extension to show hierarchical graph from left to right. It has 14 children and one parent 1 and main parent. I am calculating the height of the container using the number of nodes. Then I am calling fit function after the…
Learn AspNet
  • 1,192
  • 3
  • 34
  • 74
0
votes
1 answer

Cytoscape Dagre shows connected Children when there are multiple children

I am using Cytoscape Dagre extension to show hierarchical graph from left to right. It has 14 children and one parent 1 and main parent. All children are connected to parent 1 but whenever I use draw a graph using dagre extension, it seems like…
Learn AspNet
  • 1,192
  • 3
  • 34
  • 74
0
votes
1 answer

Add scroll bar to mat tab based on the content size

I have a cytoscape graph on a material tab. I have a button that makes graph larger. I would like to add a scroll bar when the graph is larger. Here is the stackblitz:…
Learn AspNet
  • 1,192
  • 3
  • 34
  • 74
1 2 3
4
5