नकारात्मक मानों के साथ बार चार्ट

Question

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

यहां एक उदाहरण है जो मैं प्राप्त करना चाहता हूं।

Answer 1

ठीक है, मान लें कि अपने डाटासेट के रूप में संख्या की एक सरणी है, और यह कुछ सकारात्मक और नकारात्मक मान होते हैं:

var data = [-15, -20, -22, -18, 2, 6, -26, -18]; 

आप एक बार चार्ट के निर्माण के लिए दो तराजू चाहता हूँ । y -axis के साथ बार पोजीशन की गणना करने के लिए x -axis, और दूसरा ordinal scale के साथ बार पोजीशन की गणना करने के लिए आपको एक मात्रात्मक स्केल (आमतौर पर linear scale) की आवश्यकता होती है।

मात्रात्मक पैमाने के लिए, आपको आमतौर पर अपने डेटा के डोमेन की गणना करने की आवश्यकता होती है, जो न्यूनतम और अधिकतम मूल्य पर आधारित होती है। एक आसान तरीका है कि ऐसा करने के लिए d3.extent के माध्यम से है:

var x = d3.scale.linear() 
    .domain(d3.extent(data)) 
    .range([0, width]); 

तुम भी हद तक थोड़ा पूर्णांक बनाना nice पैमाने कर सकते हैं। एक और उदाहरण के रूप में, कभी कभी आप चाहते हैं शून्य मूल्य कैनवास के बीच, ऐसी स्थिति में आप न्यूनतम और अधिकतम मूल्य के अधिक से अधिक लेने के लिए चाहता हूँ में केंद्रित किया जाना चाहिए:

var x0 = Math.max(-d3.min(data), d3.max(data)); 

var x = d3.scale.linear() 
    .domain([-x0, x0]) 
    .range([0, width]) 
    .nice(); 

वैकल्पिक रूप से, आप कर सकते हैं जो भी डोमेन आप चाहते हैं हार्ड कोड।

var x = d3.scale.linear() 
    .domain([-30, 30]) 
    .range([0, width]); 

y धुरी के लिए, आप rangeRoundBands उपयोग करने के लिए प्रत्येक बार के लिए बैंड में खड़ी अंतरिक्ष विभाजित करने के लिए चाहता हूँ। यह आपको सलाखों के बीच पैडिंग की मात्रा निर्दिष्ट करने देता है। प्रायः कुछ पहचान डेटा के साथ एक औपचारिक पैमाने का उपयोग किया जाता है - जैसे नाम या अद्वितीय आईडी। हालांकि, अगर आप भी क्रमसूचक तराजू संयोजन के रूप में डेटा के सूचकांक के साथ उपयोग कर सकते हैं:

var y = d3.scale.ordinal() 
    .domain(d3.range(data.length)) 
    .rangeRoundBands([0, height], .2); 

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

svg.selectAll(".bar") 
    .data(data) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d, i) { return x(Math.min(0, d)); }) 
    .attr("y", function(d, i) { return y(i); }) 
    .attr("width", function(d, i) { return Math.abs(x(d) - x(0)); }) 
    .attr("height", y.rangeBand()); 

अंत में, आप शीर्ष पर टिक अंक प्रदर्शित करने के लिए अक्ष जोड़ सकते हैं। आप सकारात्मक और नकारात्मक मानों की उपस्थिति को अलग करने के लिए एक भरने की शैली (या यहां तक ​​कि एक ढाल) की गणना भी कर सकते हैं। यह सबको एक साथ रखें:

• Bar Chart with Negative Values