Questions tagged [dagre-d3]

1

votes
0

answer
113

Views

Dagre.js draw edge from a child node to a parent node: Uncaught TypeError: Cannot set property ‘rank’ of undefined

I am currently using dagre.js for my visualisation project. This library is great. I got to a point where I need to create nested graphs, so a node(s) can be contained within another node (parent), I am able to do that. But I am unable to draw an edge from a child node to a parent node, whenever I'v...
Michael Lin
1

votes
0

answer
1.5k

Views

Vis.js Vs DagreD3

I would like a to know the difference between Vis.js - https://github.com/almende/vis DagreD3 - https://github.com/dagrejs/dagre I find both quite similar, but these are what I found :- 1) When I visualize in Vis - The output keeps varying, I see isomers of graphs being generated, but in dagreeD3 t...
Rudra Roy
1

votes
0

answer
103

Views

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 known ways to speed it up? For example, I already...
Dave
9

votes
1

answer
3.1k

Views

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 call something like d3.select('#svg1').resize_to_ma...
Dennis Kaarsemaker
1

votes
1

answer
823

Views

Dynamic Graph Generation using dagre-d3.js

I want to generate a graph which takes input from json model. I am using dagre-d3.js. I am able to generate nodes and also able to connect nodes statically. The method graph.addEdge(null,'A','B') connects two nodes. But i want to create edges dynamically. Is there any way to generate graph in such a...
abhhab
1

votes
1

answer
242

Views

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, height: height, 'pointer-events': 'all' }) .attr('id','wkfsvg'); var...
kayasa
1

votes
2

answer
226

Views

Change default node shape in dagre-d3

I'm using dagre-d3 to display directed graphs in a Javascript application, and its default node shape is a rectangle. I'd prefer ellipses, but it's not at all obvious to me if there's a programmatic way of changing the default (I'd rather not hack up NODE_DEFAULT_ATTRS in render.js, for example). A...
user888379
1

votes
1

answer
1.1k

Views

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 that I want a solution which should be usable to other...
django
1

votes
1

answer
426

Views

Dagre / D3 Rendering Nodes and Edges/Arrowheads at a larger size

I have this graph but it appears that the nodes and edges/arrowheads are rendering kind of small. The graph is being rendered using Dagre. I'm just wondering if there is a way to make the nodes and edges/arrowheads larger but keep them within the svg..is that possible? Or what would be causing these...
bschmitty
1

votes
1

answer
246

Views

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 {}; }); g.setNode('step1', {label: 'Step 1', style: 'fill:gray' }); g.setNo...
simpleuser
1

votes
1

answer
64

Views

Preserve d3 zoom state when changing out SVG contents?

I'm rendering something using d3, and using d3.zoom to zoom with the mouse. It works, but I also need to change the contents of the svg periodically (doing a full $('svg').html($('svg').html()) call, because my SVG contains HTML). The problem is that when I do this, I lose the zoom state. I've tried...
user31415629
1

votes
1

answer
441

Views

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+'', class: 'comp', width: 150 }); }); But when I want to render more content o...
Xaving
1

votes
2

answer
2.5k

Views

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 javascript dagre code below and advise me what I need to...
IAMTubby
1

votes
1

answer
622

Views

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'> body { font: 300 14px 'Helvetica Neue', Helvetica; } .node...
Artiga
1

votes
2

answer
4.5k

Views

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: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html What I really want to do is to customize...
ike3
12

votes
1

answer
2.3k

Views

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 understanding. svg : (is an XML-based vector image form...
IAMTubby
1

votes
4

answer
397

Views

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 vue component code and also error in the end. Vue co...
krrr25
3

votes
3

answer
1.1k

Views

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 the edges are rendered with labels, but they don't a...
Matt Sieker
2

votes
0

answer
911

Views

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 setup: http://codepen.io/anon/pen/XJZrxm In: funct...
Simon S.
3

votes
1

answer
251

Views

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 React.Component { constructor () { super(); } compone...
Janu Ramesh
7

votes
2

answer
398

Views

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 render my graph, I do g = new dagreD3.graphlib.Graph()...
db2791
2

votes
0

answer
226

Views

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 Menu is not correctly rendering. It is only in the f...
2

votes
1

answer
271

Views

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 work. var zoom = d3.behavior.zoom().on('zoom', funct...
3

votes
0

answer
693

Views

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, the one written in guide), and load the edges and...
user3458198
2

votes
0

answer
126

Views

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 the graph in the Fiddle/Image. JS Fiddle var g = ne...
2

votes
4

answer
2.2k

Views

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 dagreD3.graphlib.Graph().setGraph({}); g.setNode('TEST', { label: 'TEST'}) g.setNode('TEST1', {...
user1094183
2

votes
0

answer
221

Views

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
2

votes
1

answer
48

Views

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 overlapping', width: 70, height: 35 }); I tried to give width to the div but it is not working sample Fiddle How can i make the...
Sam
11

votes
2

answer
4.4k

Views

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 IE (which happens to be the primary browser to suppo...
IT Newbie
15

votes
2

answer
16.8k

Views

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 plugin/custom layout for DAG, please let me know. Tha...
A.G.