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，如dagreD3.dagre和dagreD3.graphlib 。

SVG是d3的輸出格式。 它是一種通用的矢量圖形格式，也可以嵌入普通的HTML。 每個SVG節點也是DOM節點。 這就是d3.select適用於SVG節點的原因。

您發布的snipplet似乎執行后處理以在節點上設置類。 您鏈接到的示例似乎從那時起已更新，並且不再包含該代碼。