2013-12-17 8 views
5

मैं सामान्य लेआउट (ग्राफ़ को देखने के लिए) के साथ सामान्य से थोड़ा सा कुछ करना चाहता हूं। नक्षत्र और सभी देखने के लिए मजेदार हैं, लेकिन टाइम्सरी डेटा के लिए, यह सहायक नहीं है। मैं कुछ धुरी द्वारा लेआउट को बाधित करने में सक्षम होना चाहता हूं, उदाहरण के लिए, डेटासेट में दिखाई देने के समय नोड्स डालने के दौरान, विज़ुअलाइज़ेशन की "उछाल" को बनाए रखते हुए। क्या यह डी 3 का उपयोग कर संभव है?प्रतिबंधित d3.js फोर्स डिस्प्ले

+1

हाँ, [इस सवाल] (http://stackoverflow.com/questions/15100060/d3-js-force-directed-layout-constrained-by-a-shape) कुछ तुम देना चाहिए देखें संकेत दिए गए। –

उत्तर

6

मेरी टिप्पणी पर विस्तृत करने के लिए, हाँ, यह पूरी तरह से संभव है। बल लेआउट वास्तव में नोड्स को स्थिति में नहीं रखता है, यह केवल पदों की गणना करता है। tick ईवेंट के हैंडलर में आप आमतौर पर उस फ़ंक्शन को प्रदान करते हैं जो स्थिति की देखभाल करता है। वहां, आप मनमानी बाधाओं को जोड़ सकते हैं जो नोड्स कैसे स्थानांतरित कर सकते हैं प्रतिबंधित करते हैं।

stock examples में से किसी एक को लेते हुए, आप x समन्वय को प्रतिबंधित करने के लिए निम्न की तरह चीजें कर सकते हैं ताकि अप्रतिबंधित वाई के साथ इच्छित स्थिति के + -10 के भीतर हो।

force.on("tick", function() { 
    node.each(function(d) { 
    var intended = scale(d.value); 
    d.x = d.px = Math.min(intended + 10, Math.max(intended - 10, d.px)); 
    }); 
    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
}); 

यहाँ एक और example स्थिति लेबल के लिए बल लेआउट का उपयोग करता है है। वहां, एक्स स्थिति को अनदेखा किया जाता है (यानी निरंतर) और केवल वाई लेआउट से प्रभावित होता है।

+0

धन्यवाद, लार्स! क्या मैं पूछ सकता हूं, है: 'var इरादा = स्केल (डी .value) 'को मेरे मामले में' var xpos = scale (d.date) 'द्वारा प्रतिस्थापित किया जाना चाहिए, जहां डेटाटाइम वह मान है जिस पर मैं अपना रखना चाहता हूं X- अक्ष? – ericmjl

+1

आपने कोई कोड पोस्ट नहीं किया है, इसलिए मुझे नहीं पता कि आपके चर क्या कहा जाता है लेकिन हाँ, यह एक्स स्थिति को निर्दिष्ट करेगा। –

+0

धन्यवाद लार्स! मैं अपने कोड में कुछ अन्य बग फिक्स करने के बाद बस इसका परीक्षण करने में सक्षम था, और यह अस्थायी रूप से काम करता है! अब यह सुनिश्चित करने के लिए स्केल को संशोधित करने के लिए कि यह ठीक से काम करता है। :-) एक बार फिर धन्यवाद! – ericmjl

2

वेबकोला D3.JS के साथ बाधा आधारित लेआउट बनाने के लिए एक शानदार टूल है।

https://github.com/tgdwyer/WebCola

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