svg，d3，dagre，dagre-d3和graphlib如何相互依賴？

Question

我已經使用dagre繪製有向圖，但我想了解svg，d3，dagre和graphlib如何相互依賴？基本上，一個停止，另一個開始。

我會試着指出我可以用我有限的理解收集的東西。

1. SVG：（是一種基於XML的矢量圖像格式，但基本上）是使用其中可以繪製圓形，橢圓形，長方形等，並然後使用克元件於兩個基團或一個HTML標記更多的形狀和應用轉換等。

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函數嗎？嗯......我已經很困惑了，你能用一個例子來解釋一下這些並存的情況嗎？ 這code snippet是什麼讓我思考：

   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的功能（這）.classed它在裏面（））。嗯......這是怎麼回事？我認爲d3.select只能對html元素完成？這是什麼？

4. graphlib：這是graphlib頁面，它說它提供了多圖的數據結構。但我的意思是，這些庫是爲d3還是爲dagre-d3構建的？

我知道我聽起來很困惑，但你明白了！如果有人可以向我解釋這些關係是如何相關的，並且可以在內部使用哪些功能，我就可以拿起。

謝謝。

Answer 1

graphlib提供表示圖的數據結構。它不做佈局或渲染。所以下面是純graphlib：

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

dagre執行節點，其中所述節點通過一個graphlib圖表示的佈局（x和y定位）。它不會渲染。大多數情況下你不會自己調用它，除非你想在沒有dagre-d3的情況下進行自定義渲染。

dagre-d3使用dagre進行佈局，並使用d3進行渲染。請注意，dagre-d3默認包含dagre和graphlib，如dagreD3.dagre和dagreD3.graphlib。

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

您發佈的snipplet似乎執行後處理來設置節點上的類。您鏈接的示例似乎自那時起已更新，並且不再包含該代碼。