AngularJS

Question

में ज़ूम करने योग्य नेटवर्क ग्राफ़ मैं AngularJS एप्लिकेशन में नेटवर्क ग्राफ़ को विज़ुअलाइज़ करना चाहता हूं। नोड्स और किनारों को JSON ऑब्जेक्ट के रूप में संग्रहीत किया जाता है, और नोड्स को बाद में जोड़ा जाएगा और संशोधित किया जाएगा (प्रत्येक 30 सेकंड में एक बार कहें)। जब JSON ऑब्जेक्ट बदलता है तो मैं ग्राफ़ को स्वचालित रूप से अपडेट करने के लिए कोणीय डेटा बाध्यकारी का उपयोग करना चाहता हूं। ग्राफ में 10-1000 नोड होंगे। नोड्स आयताकार पाठ नोड्स होंगे जिसमें प्रत्येक वाक्य के बारे में बताया जाएगा। मैं ग्राफ को ज़ूम- और पैन-सक्षम होना चाहता हूं।

मैं अब तक निम्नलिखित विकल्पों के बारे में पता है:

• ArborJS

  यह कोणीय साथ गतिशील अद्यतन करने काम करने के लिए (ParticleSystem.merge का उपयोग) आसान है। हालांकि, आर्बर ज़ूम करने योग्य व्यवहार का समर्थन नहीं करता है, और ऐसा लगता है कि यह अच्छी तरह से समर्थित नहीं है। उदाहरण के लिए, single-node bug अभी भी अनसुलझा है।

• D3

  वहाँ a zoomable force layout demo है, और विभिन्न स्थानों कोणीय साथ d3 का उपयोग कर के बारे में जानकारी है। डी 3 अच्छी तरह से समर्थित है, लेकिन यह नीचे दिए गए विकल्पों की तुलना में निम्न स्तर लगता है। उदाहरण के लिए, a network graph with good-looking rectangular node labels बनाना नॉनट्रिविअल लगता है।

• VisJS

  VisJS zoomable नेटवर्क रेखांकन का समर्थन करता है, और वहाँ a work-in-progress Angular library है, लेकिन मैं नहीं जानता कि कैसे विश्वसनीय दोनों VisJS और उसके कोणीय पुस्तकालय है।

• SigmaJS

  SigmaJS भी zoomable नेटवर्क रेखांकन का समर्थन करता है, लेकिन मैं नहीं जानता कि क्या यह कोणीय के साथ अच्छी तरह निभाता है।

• CytoscapeJS

• kmap

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

Answer 1

डी 3: http://christophergandrud.github.io/d3Network/ में स्रोत कोड के साथ नेटवर्क मानचित्र का एक अच्छा डेमो/उदाहरण है कार्यक्षमता सब कुछ है, और डी 3 जेएसओएन के साथ अच्छा लगता है। मेरे शोध से, यह विज़ुअलाइज़ेशन लाइब्रेरी के लिए एक मजबूत विकल्प है। कई अन्य पुस्तकालय (ग्रेफाइट, इत्यादि) भी समान कार्यक्षमता का समर्थन करते हैं लेकिन इसे लागू करना कठिन होता है और अत्यधिक सक्रिय नहीं होते हैं।

एनवीडी 3 एंगुलरजेएस के लिए डिज़ाइन किए गए डी 3 की एक भिन्नता है जो काम भी कर सकती है। डीवी की तुलना में एंगुलरजेएस में एनवीडी 3 के भीतर से ग्राफ और चार्ट को कार्यान्वित करना आसान है।

Answer 2

यह वास्तव में Software Recommendation स्टैक एक्सचेंज पर होना चाहिए लेकिन मैं बकाया के कारण बंद करने के लिए वोट नहीं दे सकता।

GoJS कोणीय (simple demo here) के साथ आपकी सभी आवश्यकताओं और कार्यों का समर्थन करता है।(मॉडल स्टोरेज, डेटा बाध्यकारी, ज़ूम और पैन के लिए जेएसओएन)

Answer 3

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

app.directive('visNetwork', function() { 
    return { 
     restrict: 'E', 
     require: '^ngModel', 
     scope: { 
      ngModel: '=', 
      onSelect: '&', 
      options: '=' 
     }, 
     link: function($scope, $element, $attrs, ngModel) { 
      var network = new vis.Network($element[0], $scope.ngModel, $scope.options || {}); 

      var onSelect = $scope.onSelect() || function(prop) {}; 
      network.on('select', function(properties) { 
       onSelect(properties); 
      }); 

     } 

    } 
}); 

कौन सा मैं इतनी तरह मेरे html में उपयोग करें::

$scope.nodes = new vis.DataSet(); 
    $scope.edges = new vis.DataSet(); 
    $scope.network_data = { 
     nodes: $scope.nodes, 
     edges: $scope.edges 
    }; 
    $scope.network_options = { 
     hierarchicalLayout: { 
      direction: "UD" 
     } 

    }; 

    $scope.onNodeSelect = function(properties) { 
     var selected = $scope.task_nodes.get(properties.nodes[0]); 
     console.log(selected); 
    }; 

    $scope.nodes.add([ 
     {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'}]); 

    $scope.edges.add([ 
     {id: 1, from: 1, to: 2}, 
     {id: 2, from: 3, to: 2} 
    ]); 

Answer 4

एक वाणिज्यिक में:

<vis-network ng-model="network_data" options="network_options" on-select="onNodeSelect" id="previewNetwork"> 
</vis-network> 

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

यह एक पूर्ण-विशेषीकृत ग्राफ ड्राइंग और संपादन एप्लिकेशन है जो आपके सभी ग्राफिंग और आरेखण आवश्यकताओं के लिए समाधान प्रदान करता है।

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

कम-अंत उपकरणों पर पाठ की प्रत्येक पंक्ति के साथ एक हजार नोड्स के लिए, स्क्रीन पर सभी को एक ही समय में प्रदर्शित करने में समस्याग्रस्त हो जाएगा, हालांकि वर्चुअलाइजेशन भी यहां सहायता करता है।

कुछ live, online demos हैं जो कोणीय (2+) और कोणीय जेएस एकीकरण के विभिन्न स्तर दिखाते हैं, लेकिन यदि आप वास्तव में प्रोग्रामिंग स्तर पर लाइब्रेरी के साथ खेलना चाहते हैं, तो आपको इसे डाउनलोड करना चाहिए और गैर-मिनीफाइड स्रोतों को देखना चाहिए उन डेमो। एंगुलर 2 + विकास के लिए टाइपस्क्रिप्ट बाइंडिंग का एक पूरा सेट उपलब्ध है और नमूने दिखाते हैं कि ग्राफ़ विज़ुअलाइजेशन के लिए कोणीय-डेटा को कैसे बाध्य करना है और एसवीजी विज़ुअलाइज़ेशन के टेम्पलेटिंग के लिए वैकल्पिक रूप से कोणीय का उपयोग कैसे करें। बेशक वे मूल ग्राफ विज़ुअलाइज़ेशन कोणीय घटक भी शामिल करते हैं।

^{प्रकटीकरण: मैं उस पुस्तकालय को प्रदान करने वाली कंपनी के लिए काम करता हूं, हालांकि मैं अपने नियोक्ता का प्रतिनिधित्व SO पर नहीं करता हूं।}