2

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 am linking to the "latest" dagreD3 library at:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>

I can get a working graph using instead these objects and code, that I find in other examples:

var g = new dagreD3.graphlib.Graph();
var inner = d3.select("g");
var render = new dagreD3.render();  // Create the renderer
    render(inner, g);  // Run the renderer.

So my assumption is that the DiGraph and Renderer objects are "old" and deprecated, is that correct? If not, why can I not create the Renderer and DiGraph objects? Am I a complete noob?

If the Renderer and DiGraph objects are in fact obsolete, how do I get layouts and/or enable transitions like described with in this thread and using the sample code found there at https://github.com/cpettitt/dagre-d3/issues/31:

// Custom transition function
function transition(selection) {
  return selection.transition().duration(500);
}
renderer.transition(transition);

All I really want to do is remove a node and/or edge from a graph and have it "transition" into the new layout. I would think it would look something like this:

g.transition().removeNode(d);
g.transition().removeEdge(v);

The best I can get working is this:

g.removeNode(d);
g.removeEdge(v);
render(inner, g);

which "jumps" to the new layout instead of smoothly transitioning. I am new to D3 and still learning - What am I missing? Thanks for your help.

sguidos
  • 31
  • 5

1 Answers1

0

you can see your answer here:

g.graph().transition = function(selection) {
  return selection.transition().duration(500);
};

And in use here:

http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

Rich
  • 1