आकार के आधार पर चार्ज - डी 3 फोर्स लेआउट

Question

मैं d3.layout.force का उपयोग करके एक बल निर्देशित ग्राफ बनाने की कोशिश कर रहा हूं, और मुझे कंटेनर को आकार बदलने की आवश्यकता है - यह है कि मैं उपयुक्त चार्ज और लिंक की गणना करने में सक्षम होना चाहता हूं आकार, या डी 3 मेरे लिए कुछ जादुई तरीके से करते हैं।

मैंने एक प्रयास किया है (लिंक: http://jsfiddle.net/VHdUe/6/) जो केवल नोड्स का उपयोग करता है। मैं चार्ज को उस मान पर सेट कर रहा हूं जो नोड्स की संख्या पर आधारित है जो सर्कल के त्रिज्या में फिट होगा जो इसे आकार देने लगता है।

समाधान कुछ मध्यम आकार के कंटेनर के लिए काम करता है, लेकिन अगर आप कुछ समय के आकार बदलने के लिए क्लिक करें, आप यह वास्तव में सभी आकारों के लिए काम नहीं करता है देख सकते हैं ...

केवल आगे का रास्ता मैं देख सकता है एक एसवीजी स्केल ट्रांसफॉर्म का उपयोग करके, जो मेरे तत्वों के आकार को प्रतिकूल बना देगा। कोई अन्य विकल्प?

पीएस: मैंने http://mbostock.github.com/d3/talk/20110921/bounding.html (D3 force directed layout with bounding box का उत्तर) देखा है, लेकिन मुझे एक बाध्यकारी बॉक्स के मुकाबले गुरुत्वाकर्षण-आधारित समाधान होगा।

Answer 1

charge और linkDistance के अतिरिक्त, आपके पास gravity भी है। यदि आप चाहते हैं कि ग्राफ़ लेआउट आकार में समान रिश्तेदार घनत्व बनाए रखे, तो आप चार्ज और गुरुत्वाकर्षण दोनों को स्केल करना चाहेंगे। ये मुख्य दो कंप्यूटिंग बलों हैं जो ब्लॉब के समग्र आकार को निर्धारित करते हैं। अधिक जानकारी के लिए my force layout talk देखें।

मैं कुछ विभिन्न संस्करणों की कोशिश की, और यह एक बहुत अच्छी तरह से काम करने के लिए लग रहा था: नोड्स लेआउट के क्षेत्र से विभाजित क्षेत्र:

var k = Math.sqrt(nodes.length/(width * height)); 

layout 
    .charge(-10/k) 
    .gravity(100 * k) 

यहाँ nodes.length/(width * height) रैखिक ग्राफ घनत्व के लिए आनुपातिक है। चार्ज फोर्स inverse-square law का पालन करता है, ताकि यह समझाया जा सके कि वर्ग रूट अच्छी तरह से क्यों काम करता है। डी 3 की "गुरुत्वाकर्षण" एक वर्चुअल वसंत है जो लेआउट सेंटर से दूरी के साथ रैखिक रूप से स्केल करता है, इसलिए यह गुरुत्वाकर्षण को भी बढ़ाता है क्योंकि ग्राफ घनत्व बन जाता है और बाउंडिंग बॉक्स से बचने से नोड्स को हतोत्साहित करता है।