How are svg, d3, dagre, dagre-d3 and graphlib dependent on each other?

Question

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.

1. svg : (is an XML-based vector image format, but basically it) is an html tag using which you can draw circle, ellipse, rectangle etc and then use the g element to group two or more shapes and apply transformations etc.

2. d3 : d3 is a javascript library which basically allows you to combine data with svg. So, instead of writing svg tags everytime, you basically use programming,loops, data etc and create svg code.

   Now coming to dagre, dagre-d3 and graphlib is where I have a problem assuming that whatever I said above makes any sense :)

3. dagre,dagre-d3 : This is what the dagre page says "Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side. The dagre-d3 library acts a front-end to dagre, providing actual rendering using D3."

   Can someone please explain this to me? So can I use d3 functions inside dagre, dagre-d3? Hmm..I'm confused already, Can you explain with an example how all these co-exist? This code snippet is what got me thinking:

   var oldDrawNodes = renderer.drawNodes();
   renderer.drawNodes(function(graph, root) {
     var svgNodes = oldDrawNodes(graph, root);
     svgNodes.each(function(u) { 
        d3.select(this).classed(graph.node(u).nodeclass, true); 
     });
     return svgNodes;
   });
   

   Here, drawNodes is a function from dagre-d3 but it is being over-ridden and we are passing a d3 function(d3.select(this).classed) inside it. Hmm...how is that happening? I thought that d3.select could be done only to html elements? What is 'this' over here?

4. graphlib : This is the graphlib page and it says that it provides data structures for multigraphs. But I mean, are these libraries built for d3 or for dagre-d3?

I know I sound confused but you get it! If someone could explain to me with an example on how these are related and what functions could be used inside what, I'll be able to pick up.

Thanks.

Answer 1

graphlib provides the data structure representing the graph. It does not do layout or rendering. So the following is pure graphlib:

var g = new Graph();
g.setNode(...);
g.setEdge(...);

dagre performs the layout (x and y positioning) of nodes, where the nodes are represented by a graphlib graph. It does not do rendering. Most of the time you would not call it yourself, unless you want to do custom rendering without dagre-d3.

dagre-d3 uses dagre for layout, and renders it using d3. Note that dagre-d3 includes dagre and graphlib by default, as dagreD3.dagre and dagreD3.graphlib.

SVG is the output format for d3. It is a general-purpose vector graphics format, which can also have normal HTML embedded. Each SVG node is also a DOM node. This is why d3.select works on SVG nodes as well.

The snipplet you posted appears to perform post-processing to set classes on the nodes. The example you linked to seems to have been updated since then, and does not include that code anymore.