2012-07-13 15 views
8

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

प्रत्यक्ष चिंता

उदाहरण के कई तरह, मैं इस तरह एक JSON संरचना है:

{"nodes": ["node1", "node2", ... ], 
"links": [{source: 0, target: 1, "field1": 5, ...}, ... ]} 

हालांकि, मुझे लगता है कि यह इस तरह मेरे डेटा स्रोतों के निर्माण के लिए आसान होगा:

{"links": [ 
    {source: "node1", target: "node2", "field1": 5, ...}, 
    {source: "node2", target: "node4", "field1": 1, ...}, 
    {source: "node3", target: "node4", "field1": 8, ...} 
]} 

स्पष्ट रूप से मेरे ग्राफ में नोड्स को परिभाषित करने के बजाय, वे लिंक संरचनाओं में निहित रूप से परिभाषित हैं।

कारण

मैं परियोजना मामले में किसी को कुछ विशिष्ट उदाहरण कोड या इस जिनमें से मैं अनजान हूँ करने का मुहावरेदार रास्ता था की अंतिम लक्ष्य सूची करना चाहता था।

परियोजना के लिए लक्ष्य अंततः एक ग्राफ होगा जो वास्तविक समय में अपडेट हो रहा है। बैक एंड विकसित किया जा रहा है और कुछ बदलाव और संशोधन के अधीन है।

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

धन्यवाद!

अगर इससे पहले पूछा गया है तो मैं क्षमा चाहता हूं। मैंने कुछ खोज किया और कुछ भी नहीं मिला। अगर मैं इसे याद करता हूं तो अपमान और बेरेट करने के लिए स्वतंत्र महसूस करें।

उत्तर

4

मैं इस कई बार ऐसा करने के लिए किया है। मैंने पाया है कि सबसे सरल दृष्टिकोण सिर्फ नोड्स बेस के सेट को लिंक की सूची को गणना करने के लिए किया गया है और उसके बाद इसे बल ग्राफ के उपयोग के लिए सरणी में बदल दिया गया है:

var links = [ .... ]; 
var nodeMap = {}; 
links.forEach(function(d, i) { 
    nodeMap[d.source] = true; 
    nodeMap[d.target] = true; 
}); 

var nodes = []; 
for (key in nodeMap) 
    nodes.push(key); 

d3.layout.force() 
     .nodes(nodes) 
     .links(links); 
4

मैंने इसे "D3 Based Force Directed Radial Graph" उदाहरण में किया है। मैं ऐसा इसलिए करता हूं क्योंकि मैं समझना चाहता हूं कि डेटा का उपयोग कैसे किया जाता है, आंतरिक रूप से, जेएसओएन और सीएसवी जैसी संरचनाओं से स्वतंत्र, जिसे बाद में हमेशा स्तरित किया जा सकता है।

किसी भी तरह, मुझे आशा है कि उदाहरण आपको मदद करेगा।

माई बेस्ट,

फ्रैंक

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