2012-01-06 18 views
13

मुझे जेसन इनपुट के लिए जावास्क्रिप्ट में नेटवर्क विज़ुअलाइजेशन ग्राफ़ (चार्ट नहीं) की आवश्यकता है। मैंने ग्राफ में बहु स्तर दिखाने के लिए जेआईटी इन्फोविस टूलकिट आरजीआरएफ़ और स्पेस ट्री का भी इस्तेमाल किया। लेकिन विशाल डेटा के लिए नोड्स गिरने लगे। आरजीआरएफ़ में, किनारे के अरोहेड नोड्स के साथ विलय हो जाते हैं, अंतरिक्ष पेड़ में अगर बच्चे के माता-पिता 4 बच्चे हैं तो बच्चे को बहुत व्यापक बनाते हैं। इसलिए यह डेटा की बड़ी मात्रा के लिए स्थिर नहीं है। लेकिन मैं infovis जेसन इनपुट प्रारूप के समान ग्राफ नहीं मिल सका। इन्फोविस स्पेस पेड़ और आरजीआरएल को हल करने के लिए कृपया मुझे वैकल्पिक या समाधान सुझाएं। अग्रिम धन्यवादजावास्क्रिप्ट नेटवर्क ग्राफ़ विज़ुअलाइजेशन

उत्तर

3

जहां तक ​​मुझे पता है, ग्राफ विज़ुअलाइज़ेशन पर काम करने के लिए कुछ खुले स्रोत जेएस प्रोजेक्ट हैं।

  1. जेआईटी, जिसका आप उपयोग कर रहे हैं।
  2. arborjs
  3. protovis स्टैनफोर्ड से। यह बहुत अच्छा लगता है, लेकिन यह अब विकास के तहत सक्रिय नहीं है।

ईमानदार होने के लिए, मैंने कभी भी अपनी परियोजना में उनका उपयोग नहीं किया है। आप उन्हें स्वयं कोशिश कर सकते हैं।

+0

ऐसा लगता है कि डी 3 के मुख्य देव पूर्व protovis देव है। ऐसा लगता है कि वह डी 3 पर चले गए हैं। तो यह एक कारण हो सकता है कि प्रोटोविस अब और क्यों नहीं बनाए रखा जाता है। – ptikobj

6

इसके अलावा D3, एक "डेटा के आधार पर दस्तावेजों से छेड़छाड़ के लिए एक JavaScript लाइब्रेरी" और sigma.js, एक की जाँच "खुला स्रोत हल्के JavaScript लाइब्रेरी रेखांकन आकर्षित करने के लिए, एचटीएमएल कैनवास तत्व का उपयोग कर।"

1

आप इस इंटरैक्टिव एचटीएमएल 5 चार्ट पुस्तकालय, डाटा दृश्य सॉफ्टवेयर लैब द्वारा प्रदान की जाँच करने के लिए चाहते हो सकता है:

  • समय आधारित:

    http://datavisualizationsoftwarelab.com/

    इस SDK आप चार्ट की एक विस्तृत श्रृंखला बनाने की सुविधा देता चार्ट

  • नेटवर्क चार्ट
  • पाई चार्ट
  • ,210
  • जल्द ही आ रहा भू चार्ट, पहलू चार्ट और एक्सएमएल चार्ट हैं

रेखांकन शुद्ध कर रहे हैं एचटीएमएल 5, अन्य libs पर कोई dependancies, इस प्रकार आसान किसी भी जे एस ढांचे (जैसे jQuery के रूप में) के साथ एकीकृत करने। प्रतिपादन के लिए कैनवास का उपयोग करता है, नेविगेशन, बातचीत और डेटा की खोज के लिए पूर्ण बहु स्पर्श समर्थन है।

नेटवर्क चार्ट का एक उदाहरण:

enter image description here

चार्ट व्यापक एपीआई और सेटिंग के साथ आते हैं, तो आप चार्ट के हर पहलू को नियंत्रित कर सकते हैं।

2

चेकआउट netjsongraph.js, डी 3 पर आधारित एक साधारण जावास्क्रिप्ट लाइब्रेरी जो NetJSON प्रारूप का उपयोग करती है, जो विशेष रूप से नेटवर्किंग सॉफ़्टवेयर के लिए डिज़ाइन की गई है।

netjsongraph demo example देखें।

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

0

मेरे लिए - मैं vis.js पसंद करते हैं, क्योंकि:

  • जनरेट किया गया नेटवर्क लोचदार है - जैसे जूम-इन/ज़ूम के रूप में - उपयोगकर्ता नेटवर्क फिर से आकार देने
  • कुछ उपयोगी यूआई सुविधाओं एकीकृत कर रहे हैं के अनुसार स्वतः अनुकूलित -out
  • नेटवर्क अत्यधिक अनुकूलन योग्य है, - किनारे रंग, चौड़ाई, आदि ...
  • नेटवर्क नोड्स को परिभाषित करते समय - नोड्स के लिए एक्स, वाई निर्देशांक निर्दिष्ट करने की आवश्यकता नहीं है।
    (मैं कुछ lib के जहां नोड्स के लिए पहला, दूसरा coords परिभाषित करने की जरूरत को देखा है, और कहा कि वास्तव में बेकार)
  • ऐसा नहीं है कि यह इस libarary उपयोग करने के लिए बहुत आसान है उल्लेख करने के लिए, - नीचे देखें:

उपयोग:

// create an array with nodes 
    var nodes = new vis.DataSet([ 
    {id: 1, label: 'Node 1'}, 
    {id: 2, label: 'Node 2'}, 
    {id: 3, label: 'Node 3'}, 
    {id: 4, label: 'Node 4'}, 
    {id: 5, label: 'Node 5'} 
    ]); 

    // create an array with edges 
    var edges = new vis.DataSet([ 
    {from: 1, to: 3, width: 1}, 
    {from: 1, to: 2, width: 6}, 
    {from: 2, to: 4, width: 1}, 
    {from: 2, to: 5, width: 3}, 
    {from: 2, to: 3, width: 1}, 
    ]); 

    // create a network 
    var container = document.getElementById('mynetwork'); 
    var data = { 
    nodes: nodes, 
    edges: edges 
    }; 
    var options = {}; 
    var network = new vis.Network(container, data, options); 

Demo

संबंधित मुद्दे