svg,d3,dagre,dagre-d3和graphlib如何相互依赖？

Question

我用dagre绘制有向图,但我试图理解svg,d3,dagre和graphlib是如何相互依赖的？基本上,一个人停下来,另一个人开始.

我会尝试用我有限的理解指出我能收集到的东西.

1. svg :(是一种基于XML的矢量图像格式,但基本上是它)是一个html标签,使用它可以绘制圆形,椭圆形,矩形等,然后使用g元素分组两个或多个形状并应用变换等.

2. d3:d3是一个javascript库,它基本上允许你将数据与svg结合起来.因此,不是每次都编写svg标记,而是基本上使用编程,循环,数据等并创建svg代码.

   现在来到dagre,dagre-d3和graphlib是我有一个问题,假设我上面所说的任何事情都有意义:)

3. dagre,dagre-d3:这是dagre页面所说的" Dagre是一个JavaScript库,可以很容易地在客户端布置有向图.dagre-d3库作为dagre的前端,提供实际渲染使用D3. "

   有人可以向我解释一下吗？那么我可以在dagre,dagre-d3中使用d3函数吗？嗯......我已经很困惑了,你能用一个例子来解释这些是如何共存的吗？这个代码片段让我思考:

   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;
   });
   

   这里,drawNodes是dagre-d3的一个函数,但是它被覆盖了,我们在它里面传递了一个d3函数(d3.select(this).classed).嗯......这是怎么回事？我认为d3.select只能用于html元素吗？这是什么'这个'？

4. graphlib:这是graphlib页面,它表示它为多图形提供数据结构.但我的意思是,这些库是为d3还是为dagre-d3构建的？

我知道我听起来很困惑,但你明白了!如果有人可以向我解释一下如何将这些相关以及哪些功能可以在哪些内部使用,我将能够接受.

谢谢.

Answer 1

graphlib提供表示图形的数据结构.它不做布局或渲染.所以以下是纯graphlib:

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

dagre执行节点的布局(x和y定位),其中节点由graphlib图表示.它不做渲染.大多数情况下你不会自己调用它,除非你想在不使用dagre-d3的情况下进行自定义渲染.

dagre-d3使用dagre进行布局,并使用d3渲染它.请注意,dagre-d3默认包含dagre和graphlib,as dagreD3.dagre和dagreD3.graphlib.

SVG是d3的输出格式.它是一种通用的矢量图形格式,也可以嵌入普通的HTML.每个SVG节点也是DOM节点.这也是d3.select适用于SVG节点的原因.

您发布的snipplet似乎执行后处理以在节点上设置类.您链接到的示例似乎从那时起已更新,并且不再包含该代码.