svg, d3, dagre, dagre-d3 और graphlib एक-दूसरे पर निर्भर कैसे हैं?

Question

मैंने निर्देशित ग्राफ को चित्रित करने के लिए डैग्रे का उपयोग किया है, लेकिन मैं समझने की कोशिश कर रहा हूं कि svg, d3, dagre और graphlib एक-दूसरे पर निर्भर हैं? असल में, जहां कोई रुक जाता है और दूसरा शुरू होता है।

मैं कोशिश करूँगा और बताऊंगा कि मैं अपनी सीमित समझ के साथ क्या एकत्र कर सकता हूं।

1. svg: (एक XML- आधारित वेक्टर छवि प्रारूप है, लेकिन मूल रूप से यह) एक HTML का उपयोग कर आप चक्र, अंडाकार, आयत आदि आकर्षित और फिर समूह दो के लिए जी तत्व का उपयोग कर सकते हैं जो या टैग है अधिक आकार और लागू परिवर्तनों आदि

2. d3: D3 एक जावास्क्रिप्ट पुस्तकालय जो मूल रूप से आप svg साथ डेटा गठबंधन करने के लिए अनुमति देता है। तो, हर बार svg टैग लिखने के बजाय, आप मूल रूप से प्रोग्रामिंग, लूप, डेटा इत्यादि का उपयोग करते हैं और svg कोड बनाते हैं।

   अब dagre को, dagre-डी 3 और graphlib वह जगह है जहाँ मैं एक समस्या यह सोचते हैं कि जो कुछ भी मैंने ऊपर कहा कोई मतलब :)

3. dagre, dagre-डी 3 बनाता है आने वाले: यह क्या है dagre पेज कहते हैं, "dagre यह आसान हो जाता क्लाइंट-साइड पर निर्देशित रेखांकन बिछाने के लिए करता है कि एक जावास्क्रिप्ट पुस्तकालय है। dagre-डी 3 पुस्तकालय सामने के अंत dagre लिए कार्य करता है, डी 3 का उपयोग कर वास्तविक प्रतिपादन प्रदान करते हैं।"

   क्या कोई मुझसे इसकी व्याख्या करेगा? तो क्या मैं 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-डी 3, लेकिन यह अधिक से भरा जा रहा है और हम एक d3 समारोह से गुजर रहे हैं (d3.select से एक समारोह (यह) .classed है) इसके अंदर। हम्म ... यह कैसे हो रहा है? मैंने सोचा कि d3.select केवल HTML तत्वों के लिए किया जा सकता है? यहां 'यह' क्या है?

4. graphlib: यह graphlib पेज है और यह कहना है कि यह multigraphs के लिए डेटा संरचनाओं प्रदान करता है। लेकिन मेरा मतलब है, क्या इन पुस्तकालयों को डी 3 या डैग्रे-डी 3 के लिए बनाया गया है?

मुझे पता है कि मैं उलझन में हूं लेकिन आपको यह मिल गया है! अगर कोई मुझे उदाहरण के साथ समझा सकता है कि ये कैसे संबंधित हैं और किस काम के अंदर उपयोग किया जा सकता है, तो मैं इसे लेने में सक्षम हूं।

धन्यवाद।

Answer 1

ग्राफलिब ग्राफ का प्रतिनिधित्व करने वाली डेटा संरचना प्रदान करता है। यह लेआउट या प्रतिपादन नहीं करता है। तो निम्नलिखित शुद्ध graphlib है:

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

dagre नोड्स, जहां नोड एक graphlib ग्राफ का प्रतिनिधित्व कर रहे के लेआउट (x और y स्थिति) करता है। यह प्रतिपादन नहीं करता है। अधिकांश समय जब आप इसे स्वयं नहीं कहेंगे, तब तक जब तक आप डैग्रे-डी 3 के बिना कस्टम प्रतिपादन करना नहीं चाहते हैं।

डैग्रे-डी 3 लेआउट के लिए डैग्रे का उपयोग करता है, और इसे डी 3 का उपयोग करके प्रस्तुत करता है।ध्यान दें कि dagre-d3 में डिफ़ॉल्ट रूप से dagre और graphlib शामिल है, dagreD3.dagre और dagreD3.graphlib के रूप में।

एसवीजी डी 3 के लिए आउटपुट प्रारूप है। यह एक सामान्य उद्देश्य वेक्टर ग्राफिक्स प्रारूप है, जिसमें सामान्य HTML एम्बेडेड भी हो सकता है। प्रत्येक एसवीजी नोड भी एक डोम नोड है। यही कारण है कि d3.select एसवीजी नोड्स पर भी काम करता है।

आपके द्वारा पोस्ट किया गया स्निपल नोड्स पर कक्षाएं सेट करने के लिए पोस्ट-प्रोसेसिंग करने के लिए प्रतीत होता है। ऐसा लगता है कि आपके द्वारा लिंक किया गया उदाहरण तब से अपडेट किया गया है, और इसमें अब कोड शामिल नहीं है।