Come sono svg, d3, dagre, dagre-d3 e graphlib dipendenti l'uno dall'altra?

Question

Ho usato dagre per disegnare grafici diretti ma sto cercando di capire come svg, d3, dagre e graphlib siano dipendenti l'uno dall'altro? Fondamentalmente, dove uno si ferma e l'altro inizia.

Proverò a sottolineare quello che potrei raccogliere con la mia comprensione limitata.

1. svg: (è un formato grafico vettoriale basato su XML, ma in fondo) è un tag HTML con il quale è possibile disegnare cerchi, ellissi, rettangoli, ecc e quindi utilizzare l'elemento g di raggruppare due o più forme e applica trasformazioni, ecc.

2. d3: d3 è una libreria javascript che in pratica consente di combinare i dati con svg. Quindi, invece di scrivere tag svg ogni volta, in pratica usi la programmazione, i loop, i dati ecc. E crei il codice svg.

   Ora venendo al Dagre, Dagre-D3 e graphlib è dove ho un problema supponendo che tutto ciò che ho detto sopra ha un senso :)

3. Dagre, Dagre-d3: questo è ciò che il Dagre pagina dice "Dagre è una libreria JavaScript che rende facile lay out grafi orientati sul lato client. la biblioteca Dagre-D3 agisce un front-end per Dagre, fornendo il rendering reale utilizzando D3."

   Qualcuno può spiegarmelo per favore? Quindi posso usare le funzioni d3 all'interno di dagre, dagre-d3? Hmm ... Sono già confuso, puoi spiegare con un esempio come tutti questi coesistono? Questo code snippet è ciò che mi ha fatto pensare:

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

   Qui, drawNodes è una funzione da Dagre-D3 ma viene sovrascritta e stiamo passando una funzione d3 (d3.select (questo) .classed) al suo interno. Hmm ... come sta succedendo? Ho pensato che d3.select potesse essere fatto solo per gli elementi html? Cosa c'è 'questo' qui?

4. graphlib: Questa è la pagina graphlib e dice che fornisce strutture dati per le multigrafi. Ma voglio dire, queste librerie sono state create per d3 o per dagre-d3?

So che suono confuso ma capisci! Se qualcuno mi può spiegare con un esempio su come questi sono correlati e quali funzioni potrebbero essere utilizzate all'interno di cosa, sarò in grado di raccogliere.

Grazie.

Answer 1

graphlib fornisce la struttura dati che rappresenta il grafico. Non esegue il layout o il rendering. Quindi il seguente è puro graphlib:

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

Dagre esegue il layout (x e posizionamento y) di nodi, in cui i nodi sono rappresentati da un grafico graphlib. Non rende il rendering. La maggior parte delle volte non lo chiameresti tu stesso, a meno che tu non voglia eseguire rendering personalizzati senza dagre-d3.

dagre-d3 usa dagre per il layout e lo esegue utilizzando d3.Si noti che dagre-d3 include dagre e graphlib per impostazione predefinita, come dagreD3.dagre e dagreD3.graphlib.

SVG è il formato di uscita per d3. Si tratta di un formato di grafica vettoriale generico, che può anche avere normale HTML incorporato. Ogni nodo SVG è anche un nodo DOM. Questo è il motivo per cui d3.select funziona anche su nodi SVG.

Lo snipplet che è stato postato sembra eseguire la post-elaborazione per impostare le classi sui nodi. L'esempio a cui sei collegato sembra essere stato aggiornato da allora e non include più quel codice.