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

how to update dagreD3 node style without re-rendering graph

Is there a way to change the style of a node without having to re-render the graph, like in the last code block below? var g = new dagreD3.graphlib.Graph({compound:true}) .setGraph({}).setDefaultEdgeLabel(function() { return {};…
simpleuser
  • 1,617
  • 25
  • 36
2
votes
0 answers

How to draw a graph layout where one axis is fixed

I'm trying to draw a graph layout where the y-axis coordinate is based on time - is there any known algorithm that achieves this? I've looked into dagre, but it seems like the ranking system is purely based on the edges in the network. Multiple…
Dave
  • 1,051
  • 1
  • 10
  • 20
2
votes
4 answers

Vuejs methods not firing

When i call a vuejs function from jquery selector it is not firing. I have integrate d3-dagre chart in vue component. when i set a click action for the nodes it is not firing the vuejs methods. In the below getJobid() is not firing. Find the below…
krrr25
  • 681
  • 2
  • 12
  • 29
2
votes
1 answer

d3 zooming by click ctrl and mousewheel, disable browserzoom

i want to zoom a dagre-d3 graph by clicking ctrl and mousewheel. If i dont press ctrl i want that the browser scroll is active. When i want to pan the graph it should work without clicking ctrl. Is it possible? I have made a fiddle but it does not…
user7222571
2
votes
0 answers

How to find the width and height of the label on a node in d3 and dagre-d3

I've been working for a while to get the width and height of a label from a d3 node. I have an icon on the node that will toggle a subGraph. But I need the node's width and height to be set dynamically based on the size of the label. Once I get the…
techer
  • 181
  • 2
  • 16
2
votes
3 answers

dagre-d3 js Zoom Fit to all contents

I am using dagre-d3 which is based upon d3.js. After my graph is rendered I want it to zoom to fit all contents and it must be centered. As you can see I can center it alright but I cant seem to fit all contents as my height is 400. Please note…
django
  • 2,809
  • 5
  • 47
  • 80
2
votes
1 answer

Assigning hyperlinks to nodes in dagre-d3

I am using this graph http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html. I need when clicked on nodes it should be directed to some web address. I tried this: < html xmlns:xlink="http://www.w3.org/1999/xlink"> …
Artiga
  • 776
  • 2
  • 16
  • 37
2
votes
1 answer

Fetching data from json on node click

I have the following diagram created using D3 and dagre-d3. var width = 960, height = 700; // REMOVE OLD SVG d3.select("#wkfsvg").remove(); // ADD NEW SVG var graphArea = d3.select("body").append("svg") .attr({ width: width,…
kayasa
  • 2,055
  • 8
  • 37
  • 63
2
votes
2 answers

Positioning the edges using dagre-d3

I have a graph where the edges are overlapping with the nodes like this Can i make the edges start from right middle of the node instead of top center something like this image Is there any attribute which takes care of this issue?
Srinivas
  • 727
  • 4
  • 14
2
votes
1 answer

dagreD3 - Are Renderer and DiGraph objects deprecated? How to do Transitions and Layouts?

I see a lot of dagre-D3 code samples that start like this: var g = new dagreD3.Digraph(); var renderer = new dagreD3.Renderer(); var layout = dagre.layout(); But I cannot create these 3 objects, I get a JavaScript "not a function" error instead. I…
sguidos
  • 31
  • 5
2
votes
2 answers

How do I add a click event to a directed graph using dagre d3.js(javascript library)?

I have been able to draw a directed graph using dagre. However, now I would like to delete a node/edge on clicking it. I can use g.delEdge and g.delNode for deleting but how do I get to know that someone has clicked on the node? Please see my…
IAMTubby
  • 1,627
  • 4
  • 28
  • 40
2
votes
1 answer

Clicking on node in dagre-d3

I'm using degre-d3 and I'm having problems getting the node data for the clicked node. I have a event when clicked but the d3.select(this) doesn't seem to get me relevant data (I would like to have the node name, label and additional object data if…
gugguson
  • 819
  • 2
  • 13
  • 32
1
vote
0 answers

Fraternity/Sorority Family Line Visualization Examples

I've been struggling to figure out a free way to display large family trees. I've attempted with ObservableHQ, DagreD3, Cytoscape, and ElkJS. I've learned about D3 Clustering, various tree maps, and countless examples that somewhat do the job. I…
Brian Main
  • 11
  • 2
1
vote
2 answers

Getting unexpected black background after applying style:"stroke: blue; stroke-width: 2px;"

I'm new to reactJS and I have been trying to create a graph in react using DagreGraph. I learnt minimum react required to understand how to create a graph. This is my code that is giving errors with the edge that is created between two nodes. import…
srisatyavennela 007
  • 11
  • 1
1
vote
1 answer

Position relative is not working in Safari 11 Dagre-d3 svg

I'm trying to put Html label in dagre-d3 SVG graph, it is working fine here in Firefox and Chrome but it seems issue in Safari when adding position as relative or absolute in the custom HTML. var ready = false; var sourceActions = { "A": {…
Rana Imtiaz
  • 1,363
  • 3
  • 12
  • 18
1 2
3
4 5 6