NVD3.js मल्टीचर्ट एक्स-अक्ष लेबल लाइनों के साथ गठबंधन है, लेकिन

Question

बार नहीं है, मैं चार्ट में एकाधिक लाइनों और बार दिखाने के लिए NVD3.js multiChart का उपयोग कर रहा हूं। सब ठीक काम कर रहे हैं, लेकिन एक्स-अक्ष लेबल केवल रेखा बिंदुओं के लिए गठबंधन है, सलाखों पर नहीं। मैं सलाखों के नीचे सीधे लेबल को सही ढंग से संरेखित करना चाहता हूं जैसा कि इसे करना चाहिए। लाल लाइनों मैं चिह्नित जहां लेबल किया जाना चाहिए के साथ

: लेकिन मैं इस मिलता है। http://jsfiddle.net/n2hfN/

धन्यवाद:

मैं jsFiddle बनाया!

Answer 1

रूप @Miichi उल्लेख किया है, इस nvd3 में एक बग है ...

मुझे आश्चर्य है कि वे एक TODO "यह पता लगाने क्यों मूल्य स्थानांतरित किया जा प्रतीत होता है" क्योंकि यह बहुत स्पष्ट है कि हूँ ... बार .rangeBands() के साथ एक औपचारिक पैमाने का उपयोग करते हैं और रेखा एक रैखिक पैमाने का उपयोग करती है, और दो तराजू कभी एक दूसरे से संबंधित नहीं होते हैं, सिवाय इसके कि वे एक ही अंतराल साझा करते हैं।

एक समाधान बार से ऑर्डिनल स्केल लेना होगा, और लाइन की एक्स-स्केल बनाने के लिए इसे बार चौड़ाई के आधे से समायोजित करना होगा। इससे लाइन के बिंदु बार के केंद्र में होंगे। मुझे लगता है कि nv.models.linePlusBarChart में कुछ ऐसा ही किया गया है जो @LarsKotthoff का उल्लेख है।

मूल रूप से, अपनी लाइन के एक्स पैमाने पर कुछ इस तरह दिखेगा:

var xScaleLine = function(d) { 
    var offset = xScaleBars.rangeBand()/2; 
    return xScaleBars(d) + offset; 
}; 

... जहां xScaleBars एक्स पैमाने पर चार्ट का बार भाग के लिए इस्तेमाल किया है।

एनवीडी 3 के लिए स्रोत कोड के माध्यम से संयोजन करके, ऐसा लगता है कि यह स्केल chart.bars1.scale() के रूप में सुलभ है।

शायद किसी दिन nvd3 के लेखकों का निर्णय होगा कि लाइब्रेरी का उनका क्लज कुछ दस्तावेज के योग्य है। अभी के लिए, मैं आपको दयालु दिखा सकता हूं जो समस्या को हल करेगा, एक कस्टम चार्ट बनाकर, और दिखाएगा कि दो स्केल कैसे संबंधित होंगे।

पहले, मैं आपके डेटा का उपयोग करेंगे, लेकिन दो सरणियों में लाइन और बार डेटा को अलग:

var barData = [ 
    {"x":0,"y":6500}, 
    {"x":1,"y":8600}, 
    {"x":2,"y":17200}, 
    {"x":3,"y":15597}, 
    {"x":4,"y":8600}, 
    {"x":5,"y":814} 
]; 

var lineData = [ 
    {"x":0,"y":2}, 
    {"x":1,"y":2}, 
    {"x":2,"y":4}, 
    {"x":3,"y":6}, 
    {"x":4,"y":2}, 
    {"x":5,"y":5} 
]; 

फिर सलाखों के लिए तराजू की स्थापना की। एक्स-स्केल के लिए, मैं nvd3 के multiBar के लिए डिफ़ॉल्ट समूह अंतर के साथ एक औपचारिक पैमाने और rangeRoundBands का उपयोग करूंगा जो 0.1 है। वाई-स्केल के लिए मैं .nice() का उपयोग करके नियमित रैखिक पैमाने का उपयोग करूंगा ताकि स्केल एक अजीब मूल्य पर समाप्त न हो क्योंकि यह डिफ़ॉल्ट रूप से nvd3 में करता है। सबसे बड़े मूल्य से ऊपर कुछ जगह होने से आपको कुछ संदर्भ मिलते हैं, जो एक चार्ट की व्याख्या करने की कोशिश करते समय "अच्छा" होता है।

var xScaleBars = d3.scale.ordinal() 
    .domain(d3.range(barData.length)) 
    .rangeRoundBands([0, w], 0.1); 

var yScaleBars = d3.scale.linear() 
    .domain([0, d3.max(barData, function(d) {return d.y;})]) 
    .range([h, 0]) 
    .nice(10); 

अब यहाँ महत्वपूर्ण हिस्सा है। लाइन के एक्स-पैमाने के लिए, एक अलग पैमाने नहीं बनाते हैं, लेकिन सिर्फ यह सलाखों 'एक्स पैमाने पर के एक समारोह बनाने:

var xScaleLine = function(d) { 
    var offset = xScaleBars.rangeBand()/2; 
    return xScaleBars(d) + offset; 
}; 

यहाँ एक JSBin के रूप में पूर्ण उदाहरण है।मैंने टिप्पणियों के साथ प्रमुख वर्गों को दस्तावेज करने का प्रयास किया है, इसलिए इसके समग्र तर्क का पालन करना आसान है। यदि आप एनवीडी 3 स्रोत कोड से पता लगा सकते हैं कि मल्टीचर्ट के प्रत्येक तत्व को क्या कहा जाता है और घटक भागों के अलग-अलग पैमाने को कैसे सेट किया जाए, तो आप केवल नए पैमाने पर प्लग करने में सक्षम हो सकते हैं।

मेरी भावना यह है कि आपको डीवी 3 एनवीडी 3 के साथ कुछ भी उपयोगी करने के लिए काम करता है, और यदि आप इसे अनुकूलित करना चाहते हैं, तो आप शायद अपने खुद के चार्ट को रोल करने से बेहतर हो। इस तरह आपके पास अपने चार्ट के हिस्सों के तत्व वर्ग और परिवर्तनीय नाम क्या हैं, और जो भी आप चाहते हैं, उसके बारे में पूर्ण ज्ञान और नियंत्रण प्राप्त कर सकते हैं। अगर nvd3 को उचित दस्तावेज़ीकरण मिल जाता है, तो शायद यह एक साधारण फिक्स बन जाएगा। शुभकामनाएं, और मुझे उम्मीद है कि कम से कम आपको शुरू करने में मदद मिलेगी।