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函数吗？嗯.我已经糊涂了，你能举个例子解释一下这些东西是怎么共存的吗？正是这个代码段让我想到： 变量oldDrawNodes = renderer.drawNodes()；renderer.drawNodes(函数(图，根)){ var svgNodes =oldDrawNodes(图，根)；svgNodes.each(函数(U){renderer.drawNodes true)；}；返回svgNodes；}； 在这里，function(d3.select(this).classed)是dagre-d3中的一个函数，但是它正在被重写，我们在其中传递一个d3 d3。Hmm...how，这是真的吗？我认为d3.select只能对html元素执行吗？这是什么？
4. 图形库：这是图库页面，它说它为多图提供数据结构。但我的意思是，这些库是为d3构建的还是为dagred-d3构建的？

我知道我听起来很困惑，但你明白了！如果有人能用一个例子向我解释它们是如何相关的，以及在什么里面可以使用什么函数，我就可以拿起。

谢谢。

Answer 1

graphlib提供了表示图形的数据结构。它不进行布局或渲染。因此，以下是纯图形库：

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

dagre执行节点的布局(x和y定位)，其中节点用图形库图表示。它不进行渲染。大多数情况下，您不会自己调用它，除非您希望在不使用dagre-d3的情况下进行自定义呈现。

dagre-d3使用dagre进行布局，并使用d3呈现它。注意，dagre-d3默认情况下包括dagre和graphlib，如dagreD3.dagre和dagreD3.graphlib。

SVG是d3的输出格式。它是一种通用的矢量图形格式，也可以有普通的HTML嵌入.每个SVG节点也是一个DOM节点。这就是为什么d3.select也能在SVG节点上工作的原因。

您发布的代码片段似乎执行后处理来设置节点上的类。链接到的示例似乎从那时起就被更新了，并且不再包含该代码。