d3 बार चार्ट उल्टा

Question

है मैं एक साधारण बार चार्ट d3 में तैयार, ऊर्ध्वाधर सलाखों के साथ है: http://jsfiddle.net/philgyford/LjxaV/2/

हालांकि, यह चार्ट के शीर्ष पर आधारभूत के साथ नीचे सलाखों ड्राइंग है,।

मैंने इसे पढ़ा है, इसे नीचे से खींचना, मुझे वाई-अक्ष पर range() बदलना चाहिए। यह करने के लिए

.range([0, chart.style('height')]); 

: तो, यह बदलने

.range([chart.style('height'), 0]); 

हालांकि, कि ऐसा लगता है कि चार्ट का प्रतिलोम ड्राइंग है - ऊपर अंतरिक्ष में ड्राइंग सलाखों के प्रत्येक, और छोड़ने खुद को सलाखों (नीचे से खींचा) पारदर्शी। मैं क्या गलत कर रहा हूं?

Answer 1

प्रति d3 बुनियादी बार चार्ट: http://bl.ocks.org/mbostock/3885304

आप रेंज inverting में सही हैं। ऊपर बाईं ओर स्थित svg शुरू करने के लिए

.attr('y', function(d) { return y(d.percent); }) 
    .attr('height', function(d,i){ return height - y(d.percent); }); 

Answer 2

y विशेषता स्थापना काम करने के लिए लगता है:

.attr('y', function(d){ return (height - parseInt(y(d.percent))); }) 

jsfiddle here

Answer 3

x और y निर्देशांक:

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

.attr('y', function(d) { return height - d; }) 

:

svg.selectAll('rect') 
    .data(dataset) 
    .enter() 
    .append('rect') 

के रूप में आप की इच्छा बार साजिश अधिनियम बनाने के लिए, अक्ष ऊपर दूरी data[i] पर शुरू करने के लिए y विशेषता निर्धारित

फिर, आपको अक्ष को शेष data[i] अक्ष को विस्तारित करना होगा।

.attr('height', function(d) { return d; }) 

और यही वह है!