D3.js संक्रमण

Question

मैं d3.js. का उपयोग कर एनिमेटेड बार ग्राफ़ बनाने की कोशिश कर रहा हूं। मैं चाहता हूं कि सलाखों को इस उदाहरण की तरह http://nvd3.com/ghpages/multiBar.html पर प्रदर्शित किया जाए। मैं एक समान व्यवहार बनाने में सक्षम था लेकिन बार की ऊंचाई से गति शुरू होती है जो बार को एक्स-अक्ष की तरफ बनाता है, हालांकि मैं चाहता हूं कि गति एक्स-अक्ष से शुरू हो और उदाहरण की तरह बार की ऊंचाई पर जाएं ।

मेरी कोड के बहुत सरलीकृत संस्करण: http://jsfiddle.net/gorkem/ECRMd/

किसी भी मदद की बहुत सराहना की जाएगी

Answer 1

क्योंकि समन्वय प्रणाली का उद्गम से ऊपरी बाएं भाग 'y' मूल्य पर लंगर डाले है है प्रत्येक बार के शीर्ष। यदि 'वाई' मान तय किया गया है, और 'ऊंचाई' बढ़ जाती है, तो ऐसा लगता है कि बार बढ़ने लगते हैं। सलाखों को नीचे से बढ़ने के लिए, आपको एक ही समय में 'वाई' और 'ऊंचाई' दोनों को स्थानांतरित करने की आवश्यकता होगी।

यह वही होना चाहिए जो आप खोज रहे हैं, मैंने केवल दो पंक्तियां बदल दी हैं।

chart.selectAll("rect") 
.data(data) 
.enter().append("rect") 
.attr("x", function(d, i) { return x(i) - .5; }) 
.attr("y", function(d) { return h - .5; })     //new---- 
.attr("width", w) 
.transition().delay(function (d,i){ return i * 300;}) 
.duration(300) 
.attr("height", function(d) { return y(d.value); }) 
.attr("y", function(d) { return h - y(d.value) - .5; }); //new----- 

मैंने चार्ट के नीचे 'y' मान शुरू किया है (एच - 0.5)। फिर जब आप संक्रमण करते हैं, तो आप 'ऊंचाई' (y (d.value)) बढ़ाते हैं और उसी दर पर 'y' (h-y (d.value)) को कम करते हैं। यह धुरी के लिए बार के नीचे फिक्सिंग का प्रभाव पड़ता है।

आशा है कि इससे मदद मिलती है!

Answer 2

याद रखें एक्स पैमाने पर आप उम्मीद करेंगे क्या (बार नीचे (जहां नीचे = svg ऊंचाई) से ऊपर की तरफ का निर्माण किया जा करने के लिए पीछे की ओर है। प्रवेश पर सलाखों चेतन के लिए संक्रमण का प्रयोग करें।

का एक उदाहरण क्या मुझे लगता है कि आप को प्राप्त करने के यहां पाया जा सकता कोशिश कर रहे हैं: http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1

सबसे अच्छा सभी,

जिम