svg, d3, dagre, dagre-d3 ve graflib birbirine nasıl bağlıdır?

Question

Yönlendirilmiş grafikler çizmeye can atıyorum ama svg, d3, dagre ve graflib'in birbirine nasıl bağlı olduğunu anlamaya çalışıyorum? Temel olarak, birinin durduğu ve diğerinin başladığı yer.

Sınırlı anlayışımla neleri toplayabileceğimi göstermeye çalışacağım.

1. svg: (XML tabanlı vektör resim biçimi, ancak temelde) Eğer daire, elips, dikdörtgen vb çizmek ve daha sonra ikinci grupta g eleman kullanmak ya da hangi kullanarak bir html etiketi daha fazla şekil ve dönüşümleri vb. uygulayın.

2. d3: d3 temelde svg ile verileri birleştirmenize izin veren bir javascript kitaplığıdır. Yani, svg etiketleri her zaman yazmak yerine, temelde programlama, döngüler, veri vb kullanmak ve svg kodu oluşturmak.

   Şimdi ben yukarıda bahsedilen her şeyin varsayarak bir sorun bir anlam :)

3. dagre, dagre-d3 yapar sahip olduğu dagre-d3 ve graphlib olduğunu dagre geliyor: Bu ne olduğu dagre sayfası "dagre-d3 kütüphane D3 kullanarak gerçek yansımasını sağlayarak, dagre için bir ön uç görür. dagre kolay istemci tarafında yönlendirilen grafikleri düzenlemek için yapan bir JavaScript kütüphanesidir" diyor

   Lütfen biri bunu bana açıklayabilir mi? Bu yüzden d3 işlevlerini dagre, dagre-d3 içinde kullanabilir miyim? Hmm..Şimdi kafam karıştı, bir örnekle bütün bunların nasıl var olduğunu açıklayabilir misiniz? Bu code snippet düşünmeye başladım şudur: Burada

   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 .classed d3 dagre-ama bitti basmış ediliyor ve biz d3 fonksiyonunu geçiyoruz (d3.select bir işlevi (bu) 'dir) bunun içinde. Hmm ... bu nasıl oluyor? D3.select'in sadece html elemanlarına yapılabileceğini düşündüm. Buradaki 'bu' nedir?

4. graphlib: Bu grafik dosyasıdır ve çoklu grafikler için veri yapıları sağladığını belirtir. Ama d3 ya da dagre-d3 için oluşturulan bu kütüphaneler mi?

Biliyorum kafam karıştı ama anladın! Birisi bana bunların nasıl bağlantılı olduğu ve neyin içinde hangi işlevlerin kullanılabileceği ile ilgili bir örnekle açıklayabilirse, alabileceğim.

Teşekkürler.

Answer 1

graphlib, grafiği temsil eden veri yapısını sağlar. Düzen veya görüntü yapmaz. Böylece aşağıdaki saf graphlib olup:

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

dagre düğümleri graphlib grafik ile temsil edilen düğümlerin, düzenini (x ve y konumlandırma) gerçekleştirir. Görüntü oluşturmuyor. Dagre-d3 olmadan özel bir işlem yapmak istemediğiniz sürece, çoğu zaman kendiniz demezsiniz.

dagre-d3, düzen için veriyi kullanır ve d3'ü kullanarak işler.Dagre-d3'ün varsayılan olarak, dagreD3.dagre ve dagreD3.graphlib olarak dagre ve graphlib içerdiğini unutmayın.

SVG d3 için çıktı biçimidir. Normal HTML gömülü olabilir genel amaçlı vektör grafik biçimidir. Her SVG düğümü de bir DOM düğümüdür. Bu nedenle, d3.select, SVG düğümlerinde de çalışır.

Gönderdiğiniz snipplet'in düğümlerde sınıfları ayarlamak için işlem sonrası gerçekleştirdiği görülüyor. Bağlandığınız örnek o zamandan beri güncellenmiş görünüyor ve artık bu kodu içermiyor.