2012-11-30 11 views
5

मेरा लक्ष्य डी 3 फोर्स लेआउट का उपयोग दो अलग-अलग नेटवर्क प्रदर्शित करने के लिए करना है जो समान नोड्स साझा करते हैं। उदाहरण के लिए, चार लोगों में से, आप एक सोशल नेटवर्क और वंशावली नेटवर्क परिभाषित कर सकते हैं; नोड्स वही होंगे (लोग) लेकिन लिंक (रिश्तों) अलग हो सकते हैं। दो अलग-अलग बल लेआउट बनाने के बावजूद, दो अलग-अलग svg कैनवस, और अलग-अलग चर परिभाषित करने का प्रयास करते हुए, नोड्स x और y स्थिति संबंधी जानकारी साझा कर रहे हैं। यहाँ एक न्यूनतम उदाहरण है, जिसमें एक नेटवर्क पर नोड्स खींच अन्य नेटवर्क में अपनी स्थिति को बदल देता है: http://amath.colorado.edu/student/larremore/nodesSharingPositiond3उसी पृष्ठ पर डी 3 फोर्स लेआउट के कई उदाहरण

नीचे, मैं समारोह है कि नेटवर्क में से एक बनाने के लिए कहा जाता है तैनात है, और कोड बनाने के लिए अन्य बहुत समान है, लेकिन सभी मामलों में विभिन्न चर नामों का उपयोग करता है। दोनों नेटवर्क बनाने के लिए टिप्पणी कोड http://amath.colorado.edu/student/larremore/nodesSharingPositiond3/lib/minimal.js में पाया जा सकता है और चर परिभाषित करने के लिए प्रयुक्त स्क्रिप्ट /driver/minimalScript.js < में पाया जा सकता है - मेरे पास सीधे लिंक करने के लिए पर्याप्त प्रतिष्ठा नहीं है। मैं क्षमाप्रार्थी हूं!

कहीं भी d3.force काम करता है, स्थितित्मक जानकारी वैश्विक है या वैश्विक स्तर पर चुना जा रहा है, या कुछ। क्या कोई इस पर प्रकाश डाल सकता है? मुझे स्थितित्मक जानकारी को अलग रखने के साथ-साथ यह समझने में एक समाधान में दोनों दिलचस्पी है कि d3.force स्थिति गणनाओं को कैसे संभालता है और अपडेट करता है।

function makeYNet() { 

// This populates the YactiveLinks variable with the proper YLinks. The goal is to be able to only display links whose value is above some threshold. 
for (var i=0; i<YLinks.length; i++) { 
    if (YLinks[i].link2 > thr) { 
     YactiveLinks.push(YLinks[i]); 
    } 
} 

// Add nodes and links to forceY 
forceY 
.nodes(YNodes) 
.links(YactiveLinks); 

// Draw lines 
var Ylink = svgY.selectAll("line.link") 
.data(YactiveLinks) 
.enter() 
.append("line") 
.attr("class", "link") 
.style("stroke-width", 2.0); 

// Draw nodes 
var Ynode = svgY.selectAll("circle.node") 
.data(YNodes) 
.enter().append("circle") 
.attr("class", "node") 
.attr("r", radius) 
.attr("high",0) 
.attr("id", function(d,i) { 
     return ("idy" + i); 
     }) 
.style("fill", function(d) { return color(d.group1); }) 
.call(forceY.drag) 
; 

// Define tick 
forceY.on("tick", function() { 
      Ylink 
      .attr("x1", function(d) { return d.source.x; }) 
      .attr("y1", function(d) { return d.source.y; }) 
      .attr("x2", function(d) { return d.target.x; }) 
      .attr("y2", function(d) { return d.target.y; }); 

      Ynode.attr("cx", function(d) { return d.x; }) 
      .attr("cy", function(d) { return d.y; }); 
      }); 

// Start 'er up 
forceY.start(); 
} 
+0

मैं एक ही बात करने के लिए आप के रूप में कोशिश कर रहा हूँ। मैं दो बल लेआउट जो एलेक्स रेनॉल्ड्स द्वारा उत्तर के लिए धन्यवाद काम करता है। हालांकि, मैं जहां स्थिति सिंक के लिए हुक स्थापित करने के लिए नहीं मिलता है।चूंकि डीबीलेरमोर के दृष्टिकोण के लिंक अब और काम नहीं करते हैं, क्या किसी को भी संकेत है कि कहां से शुरू करना है या शायद दूसरे उदाहरण से लिंक हो सकता है? – tty56

उत्तर

4

मैं एक उपकरण ब्राउज़ कर की अनुमति देता है कि जैविक regulatory networks लिखा था, दो एसवीजी पैनलों दिखा साइड-बाई-साइड। प्रत्येक पैनल में एक बल-लेआउट नेटवर्क होता है, जैसा कि d3.js API द्वारा खींचा जाता है।

मुझे पता चला कि यह काम करने की कुंजी डीओएम में प्रत्येक तत्व को एक अद्वितीय नाम देना है, जहां नकल हो सकती है।

मेरे मामले में, मैंने _left और _right का उपयोग प्रत्येक पैनल तत्व के लिए पर्याप्त रूप से किया, जहां तत्व क्रमशः बाएं या दाएं पैनल में है। ट्रैक रखने के लिए यह बहुत काम है, लेकिन नेटवर्क रेंडरर अपने कॉल और घटनाओं को सही तत्व और नेटवर्क पर लक्षित कर सकता है।

आपके मामले में:

.attr("id", function(d,i) { 
     return ("idx" + i); 
     }) 

तुम कुछ है जो विशिष्ट नेटवर्क है कि नोड साथ जुड़ा हुआ है के पते के साथ return मूल्य बदलना चाहते हैं। चाहे आप इंडेक्स नंबरिंग स्कीम या प्रत्यय-आधारित दृष्टिकोण का उपयोग करें, जैसे मैंने किया, यह चाल सुनिश्चित करना है कि सभी id नाम अद्वितीय हैं।

+0

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

+0

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

+0

एक और चीजें मैंने देखा है कि (शायद) एक सुराग प्रदान करता है: कुछ समय/अपव्यय के बाद, लेआउट नोड्स को उनके वर्तमान स्थान में जमा कर देगा। यदि आप बाएं लेआउट को पकड़ते हैं और दाएं फ्रीज तक इसे चारों ओर ले जाते हैं, तो आप अप्रत्यक्ष रूप से सही लेआउट को स्थानांतरित करने में असमर्थ होंगे। फिर, यदि आप सही लेआउट लेते हैं, तो आप बाएं फ्रीज तक बाएं ** केवल ** को प्रभावित करने के लिए इसका उपयोग कर सकते हैं। मेरे लिए, इसका तात्पर्य है कि लेआउट की स्थिति प्रभावित हो सकती है, जबकि शीतलन टाइमर उस आंदोलन से प्रभावित नहीं होता है। नोड्स दोनों भूखंडों में स्थानांतरित होते हैं, लेकिन केवल एक ही डायनेमिक्स पंजीकृत करता है। – DBLarremore

0

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

एक सच्ची प्रतिलिपि के बिना, परिणामस्वरूप व्यवहार थोड़ा यादृच्छिक होगा, जैसा कि आपने पाया, डी 3 कोड किसी भी साझा डेटा को संशोधित करने के लिए चुनता है या नहीं "सीटू में" या नहीं। आम तौर पर, डी 3 प्रदर्शन कारणों से प्रतियां बनाने के लिए की कोशिश करता है।

यही कारण है कि json कॉल वैकल्पिक हल काम करता है: पूरी तरह से सभी डेटा stringifying से, आप कर रहे हैं वास्तव में एक क्लोन आपरेशन मजबूर। एक ही पृष्ठ पर दो बल लेआउट के नोड पदों सिंक:

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