dagrejs / dagre-d3 Goto Github PK

Or just autoresize the selected element to contain the contents of the rendered graph...

I think you forgot to checking the jshint config file?

Running "make"

I'm getting

  8 passing (4599ms)

mkdir -p build
./node_modules/jshint/bin/jshint browser.js index.js lib/version.js lib/Renderer.js lib/util.js
lib/Renderer.js: line 8, col 18, 'Renderer' was used before it was defined.
lib/Renderer.js: line 10, col 3, Missing "use strict" statement.
lib/Renderer.js: line 27, col 3, Missing "use strict" statement.
lib/Renderer.js: line 33, col 3, Missing "use strict" statement.
lib/Renderer.js: line 39, col 3, Missing "use strict" statement.
lib/Renderer.js: line 45, col 3, Missing "use strict" statement.
...

According to the SVG specification at Mozilla's SVG Documentation, the value of markerUnits should be 'strokeWidth' (uppercase 'W')

The latest version of Chrome showed the error message Error: Invalid value for attribute markerUnits="strokewidth" when I tried the demo at Interative Demo

Firefox 29.0.1 only showed the warning message Unexpected value strokewidth parsing markerUnits attribute.

I'd like to use your library to show a simplified err-style diagram using crow's foot notation. Is there a simple way to change the way edge-ends are rendered based on specific attribute values?

Thanks

• MN

Hi,

Appreciate dagre and dagre-d3. I am trying to extend some functionality and add some external controls for the zoom level and translate position.

I have tried updating the transform attribute of the appropriate <g> directly, however upon using the built-in scrolling mechanism of dagre-d3, the transform value goes back to what it was before I updated the transform attribute directly.

I'm guessing there is a model that keeps this state somewhere... I looked through the code for a bit but could not find anything. Any suggestions? Is this possible?

URL: http://bible.bucksch.org/free/#detail=@I0025@

Reproduction:

1. Go to above URL in Firefox 24
2. Go to above URL in Firefox nightly from 2013-11-18 or 2014-01-07

Actual result:

1. You see a genealogy graph
2. You see an error "Node 'undefined' is not in graph" and all graph nodes are in the upper left corner (no position/translation).

Expected result:
2. like 1.

I can't tell whether this is a bug in Firefox, dagre or my code.

My code: I reduced and changed my code (for testing, not published) to ensure that I never pass null as ID (first parameter to addNode()/addEdge(), but the error still appears.

We need a really simple runnable example,
the documentation that is there is longish,
and needs to be debugged...

I've got it working, but it would really help if there was a simple example that just worked.

The documentation mentioned nothing about pulling in style, for example.
also, I had to add d3 as a global dep, although require('dagre-d3') worked.

I just tried a simple example (mostly a copy/paste from interactive-demo.html) with one node (labeled "a") and for some reason the has a style="opacity: 0;" on it. If I remove that style manually in the Chrome inspector the graph appears fine.

What would cause the opacity:0?

Is dagre-d3 available on any CDN? I can't find it anywhere at the moment.

Thanks.

Hello,

Using the dagreD3 renderer to produce an SVG of a parsed digraph in DOT, dagreD3 will try to set the SVG Marker element attribute 'markerUnits' to 'strokewidth'. According to SVG 1.1, d3 expects this attribute value to use the camel case convention by being set to 'strokeWidth' instead.

The following message is displayed in the JavaScript console when running:

    var dot = "digraph { A }";
    var svg = d3.select('svg');
    svg
      .attr('width', 1000)
      .attr('height', 1000);
    svg.selectAll('*').remove();
    var graph = graphlibDot.parse(dot);
    var renderer = new dagreD3.Renderer();
    var layoutGraph = renderer.run(graph, svg.append('g').attr('transform', 'translate(20, 20)'));

Error: Invalid value for attribute markerUnits="strokewidth"

Here is a link to SVG 1.1 specification:
http://www.w3.org/TR/SVG/painting.html#MarkerUnitsAttribute

Best regards,
Andreas

I am seeing an error with Makefile when running make on linux.
Here is the error:
Makefile:25: *** empty variable name. Stop.

Looking into the line I see the following code:
.PHONY: = all test demo-test lint release clean fullclean
And if I remove = sign, then I running further:
.PHONY: all test demo-test lint release clean fullclean
I see the same issue with dagre and graphlib

I had to tweak the style to get the same result as in the example... this is what i did

        .edge-label rect {
            fill: #fff;
        }

        .edge path {
            stroke: #333;
            stroke-width: 1.5px;
            fill: none;
        }

Great work!

Hi,

I started to use the dagre-d3 for visualisation of data similar to one of examples (the Sentence Tokenization). Extending this example to display a DAG instead of a tree was super easy, but I've lost control of an order in which edges leave a particular node. Is it possible to restrict it somehow? If not, could you point me where to start looking into your code? For my data the order of edges is quite important.

In fact, it would be the best if i could constraint nodes order too (position from left to right in top down graph), but as I understand, it is not possible at the moment (issue #25 ?).

Thanks

Hi,

Thanks a lot for your project. This is quite impressive!
I was wondering if there's any way to add some zooming feature (allowing to zoom in/out inside the svg).

Thanks!
Regards,
Thibault

Is it possible to have multiple labels per edges (or to customize the way labels are printed?) If it is the case, it would be nice to have an example of use.

Hi
I start using dagre and it has really awsom capabilities. However I have a question. I need to create custom nodes visualization so that every node will be a circle with some text label near it. Also I need to achieve that every edge will start after the text finishes. Please advise what is the best way to do so?

This came from Thierry on the mailing list. IE apparently does not automatically clip contents outside of the SVG's bounding box. His suggested fix:

 - About the outside canvas issue just add: 
svg { overflow: hidden; }

It works for me for IE10 and FF.

 (Answer found at: http://stackoverflow.com/questions/5642815/svg-draws-outside-canvas-boundary-in-internet-explorer-9)

Hello,

It would be nice if this library would work with d3 and require.js in browser.

Now i have an error:

Uncaught TypeError: Cannot read property 'select' of undefined 

My require.js config and usage

require.config({
    paths: {
        'jquery': '../bower_components/jquery/dist/jquery',
        'jquery-form': '../bower_components/jquery-form/jquery.form',
        'lodash': '../bower_components/lodash/dist/lodash',
        'd3': '../bower_components/d3/d3',
        'bootstrap': '../bower_components/bootstrap/dist/js/bootstrap',
        'dagreD3':'../bower_components/dagre-d3/index'
    },
    shim: {
        'jquery': {
            exports: '$'
        },
        'jquery-form': ['jquery'],
        'lodash': {
            exports: '_'
        },
//        'd3': {
//            exports: 'd3'
//        },
        'bootstrap': ['jquery'],
        'dagreD3': {
            deps: ['d3'],
            exports: 'dagreD3'
        }
    }
});

usage

define(['jquery', 'lodash', 'dagreD3', 'bootstrap'], function($, _, dagreD3) {

    var d3 = require('d3');

....

Best regards,
patS

Hi
i was wondering if there is an option to do some animation when clicking on node and expanding its children like in d3 tree http://bl.ocks.org/mbostock/4339083?

Apologies if this is already possible and I've just missed it, but I'm using dagre-d3 to draw our network diagrams (servers and load-balancers) within our provisioning tool so that we can spin up a new environment based on the resources in the diagram.

Dagre-d3 is awesome so far, I've been able to get all the functionality I needed without too much effort, the only thing that's missing is that I'd like to group my servers by subnet (or AWS availability zone, I haven't decided yet). I guess this is just a special case of bounding boxes around a group of nodes where the boxes don't overlap.

If this isn't already a feature that I've missed, is it something that I could do using d3 directly? Any pointers in the right direction would be great!

Thanks

A picture is probably worth a thousand words so I've added a demo here. You can see that the edge paths don't line up with the labels.

Hi again!

I'm trying to display 2 different graphs on the same page.
No issue until I put each graph in a Bootstrap2 tab. This leads to something like that:

Note that there's no issue with the first graph, drawed in the first tab.

I guess it comes from the display mode of the div because there is no issue when both graphs are in the same tab.

Do you have any idea?
Thanks!

If tried (and failed!) to get a way to have labels wrap in the nodes when the label string has line breaks in it. This would be really useful for something I am working on where the node labels are sentence-length rather than a couple of words.

Am I missing something?

Example:
http://jsfiddle.net/philfreo/8xSPa/1/

There are scenarios where it can be beneficial to render a graph before it's actually visible, and currently the sizing/spacing is totally off in those cases.

Is this something that can be fixed?

I'm not sure if this is the right repository for the issue as the trace kind of points to the graphlib library however I don't see any recent changes there.

Given a simple graph:

        var g = new dagreD3.Digraph();

        g.addNode("a", { label: "A" });
        g.addNode("b", { label: "B" });

        g.addEdge("foo", "a", "b", { label: "foo"});
        g.addEdge("bar", "b", "a", { label: "bar"});

I get the following error:

Uncaught Error: Edge 'foo' is not in graph dagre-d3.js:2872
BaseGraph._strictGetEdge dagre-d3.js:2872
BaseGraph.edge dagre-d3.js:2762
(anonymous function) dagre-d3.js:211
BaseGraph.eachEdge dagre-d3.js:2778
runLayout dagre-d3.js:211
Renderer.run dagre-d3.js:124
tryDraw index.html:50
onload

If I don't specify the id it draws fine, specifying the id was working for me before though.

Hi,

This demo http://nlpviz.bpodgursky.com/home , while not the simplest, used to work on my browser until 2 to 3 weeks ago.
I have simplified its code and am using it now and experience the same issue: those pretty-looking boxes you can find here http://cpettitt.github.io/project/dagre-d3/latest/demo/sentence-tokenization.html look terrible as their rounded corners are not rendered. There is just squares.

I have enjoyed working with your library and thank you a lot for all the time you spent/d on it. Could you look into the issue? It seems the weird rendering of http://nlpviz.bpodgursky.com/home is easy to reproduce.
BTW http://nlpviz.bpodgursky.com/home works with Safari.

I have noticed this in sentence visualization demo . When i click, zoom or drag the chart, it snaps to 0,0 the first time. afterwards,it works fine.

I hate to even mention IE but I've noticed that the demos don't work in IE, do you plan to have support?

Hi,

I am trying to include layout behavior but i am getting "Uncaught TypeError: undefined is not a function" in chrome and "TypeError: layout.run is not a function" in Firefox. Below is the code snipped I used.

I have added nodes and edges to dir_graph variable. Without including layout it works fine but i need to configure using different rank. Please help.

var mylayout = dagreD3.layout()
.edgeSep(50)
.nodeSep(50)
.rankSep(50)
.rankDir("LR")
.run(dir_graph);
var renderer = new dagreD3.Renderer();
renderer.layout(mylayout).run(g, d3.select("svg g"));

Thanks,

John

Thanks for the well done library. I am trying to update some labels on nodes I have displayed. I have updated the node label and want to redraw it. I am a bit lost as to where to look, D3, SVG of the graphlib dagre-D3 uses.

Is there a way to force last nodes position?

Hi, I cannot disable dragging or zooming,
I've tried to use the "on" events as suggested on d3 documentation, but it has no effect here:

renderer.run(g, d3.select("svg g").on("*", null));

or

renderer.run(g, d3.select("svg g").on("mousedown.drag", null));

Any suggestions?

http://jsfiddle.net/3gxaV/11/

I took the example of TCP State Diagram and only change the label of the nodes to div element. Seems it is not working with IE anymore because addForeignObjectLabel compute its width and height as zero. But it works well with chrome and FF.

Open console and load http://jsfiddle.net/aHC42/2/

I'm trying to modify the layout graph that is returned from renderer.run(), and it fails with an exception at

Uncaught TypeError: undefined is not a function dagre-d3.js:2313
checkSupportedPrefRank dagre-d3.js:2313
(anonymous function) dagre-d3.js:2282
dfs dagre-d3.js:2273
exports.apply dagre-d3.js:2309
(anonymous function) dagre-d3.js:3019
run dagre-d3.js:2095
(anonymous function) dagre-d3.js:3019
run dagre-d3.js:1057
(anonymous function) dagre-d3.js:3019
runLayout dagre-d3.js:227
Renderer.run dagre-d3.js:178
draw (index):110

If I use the original graph then it works.

Hi, thanks for your library! I have two questions: a) Is it possible to set a fixed node width with automatic text wrap? That would be great for nodes with long text. b) Is there an easy way to set the edge color based on the relation type?

The end marker isn't on right end of the edge as you can see from this example

All the demos mentioned in the README.md are broken, all the same message in Firefox console:
[18:46:26.257] TypeError: a.children is not a function @ http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js:1

Tested with Firefox 24 and Safari 6.0.5

Is there a way to render other shapes for nodes?

Attempting to run the renderer in node.js results in the following error:

TypeError: Object [ G.node.enter ] has no method 'getBBox'

due to the following line in Renderer.js:

var bbox = root.node().getBBox();

We should be able to do this with phantomjs. Not actively working on this yet - but this serves as a reminder.

Hello,

I know that dagre-d3 is based on graphlib but I don't know how to use encode/decode in the browser. Do I have to include graphlib? Is there an example on how to do this?

Thanks.

I would be nice to have a node linked to itself (loop).

We are using dagre in our project and having performance challenges with very large graphs. When profiling the cause for it we noticed that dagre functions seems to go through time function:

function time(name, func) {
  return function() {
    var start = new Date().getTime();
    try {
      return func.apply(null, arguments);
    } finally {
       log(1, name + ' time: ' + (new Date().getTime() - start) + 'ms');
    }
  };

I would guess that this wrapper function is initially done for development purposes to log function durations but it is left, maybe accidentially, without flags to production version.

According the following 'cleaning' increases performance 40%. So maybe you should check whether Date variable defs and Date comparing could be flagged off in the production version?

time(name, func) {
  return function() {
    try { return func.apply(null, arguments);  } 
  };
}

is it possible to use this to layout a graphlib graph with another d3 layout?
(such as d3.layout.force())

d3.select from example is undefined

Is it possible to add style or class?
ie. g.addNode("review", { label: "Review", class: "myCSS" });
or g.addNode("review", { label: "Review", style: "background-color: red" });

Thanks.

Any chance you could add this to http://bower.io/ ?

Hello again!

I've run into this situation where it seems to be snapping parts of the tree to the top of the screen resulting in long edges:

digraph {
  a1->a2->a3->a4->a5->a6->o
  b1->o
  c1->c2->o
  d1->d2->d3->o
}

Here's the same graph on graphviz's dot command:

It's not entirely sure which approach is better, but it seems like the 'b1' node should be at the top, or the rest should aligned to the bottom.

Thanks for your time.

Hi,

This is a great tool and I can show some nice dependency graphs now in browser.

I want to be able to save the diagrams. I was able to get the below working

http://www.intridea.com/blog/2013/1/9/downloadable-svg-in-png-format

But I had to do some hacking to make it a vanilla svg and have style attributes versus css classes so that canvas would render it. Even with that, I end up with mis aligned labels probably since i think the rendering is tied into the use the css elements.

So if you could have an option to return an svg that that doesn't use css but still is correct, the above could be used to save it. Which would be pretty awesome. I would be happy if its all black and white.

I'm using html (div's) inside node labels and just had to realize that this doesn't work in the Internet Explorer. This seems to be caused by IE's inability to handle the foreignObject element. MDN ( https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject ) says that using the switch element, you can add a text/svg only version that IE can understand. Perhaps this could be exposed thru your library somehow? Or maybe this is already possible and I just don't understand how to accomplish that? Thanks for your help!