एचटीएमएल/सीएसएस एक आरबीएसी ग्राफ

Question

विज़ुअलाइज़ करना मेरे पास मेरे डेटाबेस में संग्रहीत एक आरबीएसी संरचना है (वाईआई के साथ निर्मित एक परियोजना)।

आइटमों के बीच संबंधों को देखने के लिए मुझे ग्राफ उत्पन्न करना अच्छा लगेगा यह देखने के लिए कि क्या मैं तार्किक गलतियों नहीं कर रहा हूं, और अन्य टीम के सदस्यों को दिखाने के लिए।

मैं एक ऐसा पृष्ठ बनाने के बारे में सोच रहा था जो ग्राफ/पेड़ उत्पन्न करेगा। मुझे लगता है कि मैं सर्वर-साइड भाग को संभाल सकता हूं लेकिन मुझे नहीं पता कि एचटीएमएल/सीएसएस (या छवि) कैसे उत्पन्न करें।

ग्राफ में नोड्स में कई बच्चे और एकाधिक माता-पिता हो सकते हैं। तीर निर्देशित हैं। उदाहरण:

मुझे नवीनतम CSS3 और HTML5 तकनीक का उपयोग करने में कोई फर्क नहीं पड़ता क्योंकि यह केवल चयनित लोगों द्वारा उपयोग किया जाएगा।

Answer 1

मैं कुछ समय पहले इसी तरह की चिंताओं में भाग गया था। आखिर में जिस समाधान के साथ आया वह एक छोटी जेएस लाइब्रेरी है जिसने पूरी तरह से चाल, ड्रैकुला को किया था।

यहाँ लाइब्रेरी का लिंक है: https://github.com/strathausen/dracula

अपनी आवश्यकताओं को ध्यान में रखते, तुम सब करना होगा है कुछ की तरह:

var g = new Graph(); 

g.addEdge('author', 'create'); 
g.addEdge('author', 'reader'); 
g.addEdge('author', 'admin'); 

// add here the other edges. 

var layouter = new Graph.Layout.Spring(); 
layouter.layout(); 

var renderer = new Graph.Renderer.Raphael('#canvas', g, 400, 300); 
renderer.draw(); 

अधिक infos के लिए, मैं आपके साथ संघर्ष दूँगा दस्तावेज़ीकरण।

उम्मीद है कि यह मदद करता है।

[परिशिष्ट]

मुझे लगता है कि जोड़ना होगा, आम तौर पर बोल रहा है, नोड्स और तीर प्रदर्शित करने में बात नहीं एक बड़ी बात की है, svg का उपयोग कर तुच्छ के पास यह बनाता है। लेकिन जब आप नोड्स के प्रदर्शन को व्यवस्थित करना चाहते हैं, तो "क्रॉसिंग किनारों की संख्या को कम करने का प्रयास करें", "उनके माता-पिता के नीचे बच्चों को प्रदर्शित करें", आदि को जटिल जटिल गणित की आवश्यकता होती है।

मुझे नहीं लगता कि ड्रैकुला किसी को इस तरह के नियमों को अनुकूलित करने की अनुमति देता है। फिर भी, आपकी टिप्पणी पर विचार करते हुए, मुझे लगता है कि लेआउट लंबवत पेड़ की तरह दिखने के लिए एक जटिल तरीका नहीं हो सकता है, क्योंकि यह एक विश्वकोश ग्राफ है (कम से कम, ऐसा लगता है)। लेकिन फिर आपको इसके लिए अपनी पुस्तकालय बनाने के माध्यम से जाना होगा।

Answer 2

एसवीजी का उपयोग करने के बारे में क्या? एसवीजी को सीएसएस द्वारा स्टाइल किया जा सकता है, जावास्क्रिप्ट द्वारा एक्सेस किया जा सकता है और एचटीएमएल दस्तावेज़ों में एम्बेडेड किया जा सकता है। और एक वेक्टर प्रारूप का उपयोग ग्राफ विज़ुअलाइजेशन के लिए पर्याप्त प्रतीत होता है क्योंकि इसमें कई फायदे हैं। बस एक फायदा - खासकर वेब वातावरण में - बिटमैप छवियों की तुलना में बड़े ग्राफ का छोटा फ़ाइल आकार है।

ग्राफ़ विज़ुअलाइजेशन के लिए, Graphviz दिमाग में आता है। यह एक ग्राफ प्रतिपादन सॉफ्टवेयर/लाइब्रेरी है जिसे 1 9 88 से सक्रिय रूप से विकसित किया गया है। यह विभिन्न प्रकार के ग्राफ प्रस्तुत करने और परिणामस्वरूप छवि को एसवीजी सहित विभिन्न छवि प्रारूपों में निर्यात करने में सक्षम है। यह आलेखों का वर्णन करने के लिए तथाकथित 'डॉट भाषा' का उपयोग करता है। डॉट भाषा पर कई उदाहरण और दस्तावेज़ीकरण खोजने के लिए ग्राफ़विज़ project page पर एक नज़र डालें।

क्या आपने अभी तक कमांड लाइन पर dot के साथ प्रयोग किया है? dot ग्राफ़विज़ पैकेज से एक बाइनरी है जो डॉट भाषा में लिखी गई फ़ाइलों को पढ़ता है और उन्हें वांछित छवि प्रारूप में प्रस्तुत करता है। यह प्रयोगों के लिए एक अच्छा प्रारंभिक बिंदु है।

मैंने इसे एक बार PHP क्लास आरेखों को गतिशील रूप से चित्रित करने के लिए उपयोग किया है। मैं php में एक .dot फ़ाइल उत्पन्न और exec dot -Tsvg graph.dot

का उपयोग कर वहाँ भी नाशपाती खजाने Image_Graphviz कहा जाता है कि तुम्हारा के रूप में इसी तरह की परियोजनाओं में प्रयोग किया जाता है में Graphviz के लिए एक PHP आवरण पुस्तकालय है एसवीजी के लिए यह अनुवाद किया है।

बेशक आपको कुछ लेआउट समझौता करना होगा यदि आप एक सामान्य ग्राफ ड्राइंग लाइब्रेरी के साथ मैन्युअल रूप से ड्राइंग करने की तुलना में काम कर रहे हैं। लेकिन जब डॉट भाषा से परिचित हो जाए तो आप सर्वोत्तम परिणाम प्राप्त करेंगे।

Answer 3

बस निम्नलिखित के साथ प्रयास करें।,

रेखांकन जुड़ा हुआ सूचियों और पेड़ों के साथ साथ, सबसे अधिक इस्तेमाल डाटा संरचनाओं में से एक हैं। हाल ही में एक PHP परियोजना में मुझे कुछ अंतःस्थापित यूआरएल का विश्लेषण करने के लिए ग्राफ संरचना बनाने की आवश्यकता थी। समस्या एक साधारण प्रकृति की थी, इसलिए अपना खुद का कोड लिखने के बजाय, मैं पियर रिपोजिटरी में उपलब्ध एक के साथ गया।

पियर स्ट्रक्चर_ग्राफ पैकेज ग्राफ डेटा संरचनाओं को बनाने और छेड़छाड़ करने की अनुमति देता है। यह नोड्स में संग्रहीत डेटा और मेटाडेटा के साथ या तो निर्देशित या अप्रत्यक्ष ग्राफ के निर्माण की अनुमति देता है। लाइब्रेरी ग्राफ़ ट्रैवर्सिंग के साथ-साथ ग्राफ़ टोपोलॉजी से विशिष्ट निष्कर्षण के लिए फ़ंक्शंस प्रदान करता है। http://www.codediesel.com/algorithms/building-a-graph-data-structure-in-php/

कुछ नमूना कोड::

<?php 

require_once 'Structures/Graph.php'; 
require_once 'Structures/Graph/Node.php'; 

$nonDirectedGraph = new Structures_Graph(false); 

$nodes_names = array('a', 'b', 'c' ,'d', 'e'); 
$nodes = array(); 

foreach($nodes_names as $node) { 
    /* Create a new node/vertex */ 
    $nodes[$node] = new Structures_Graph_Node(); 

    /* Add the node to the Graph structure */ 
    $nonDirectedGraph ->addNode($nodes[$node]); 
} 

/** 
    * Specify connections between different nodes. 
    * For example in the following array, 'a-b' 
    * specifies that node 'a' is connected to node 'b'. 
    * Also refer to the figure above. 
    */ 

$vertices = array('a-b', 'b-c', 'b-d', 'd-c', 'c-e', 'e-d'); 

foreach($vertices as $vertex) { 
    $data = preg_split("/-/",$vertex); 
    $nodes[$data[0]]->connectTo($nodes[$data[1]]); 
} 
?> 

Answer 4

आप सर्वर साइड पर अजगर का उपयोग कर सकते हैं, तो आप Networkx का उपयोग उच्च गुणवत्ता वाले ग्राफिक्स उत्पन्न करने के लिए कर सकता है और बचाने के

इसके अलावा निम्न स्थान का उल्लेख उन्हें एसवीजी, पीएनजी या जो भी आपको पसंद है।