2013-12-16 12 views
16

पर क्षैतिज ब्रेक कैसे लागू करें मैं स्टैक्ड बार चार्ट प्लॉट करने के लिए रिक्शा (d3.js पर आधारित) का उपयोग कर रहा हूं। समस्या यह है कि पहली बार आम तौर पर दूसरों की तुलना में अधिक अधिक होती है, जो दृश्य प्रतिक्रिया को बर्बाद कर देती है। bar chart with bad proportionsd3.js बार चार्ट

लॉगरिदमिक पैमाने का उपयोग करना (मुझे लगता है) यहां एक विकल्प नहीं है, क्योंकि तब बार में ढेर के बीच अनुपात टूट जाएगा। मैं निम्नलिखित छवि में एक क्षैतिज ब्रेक पेश करना चाहता था: Bar chart with horizontal break

हालांकि, मुझे ऐसा कुछ करने के लिए रिक्शा या d3.js के किसी भी बॉक्स ऑफ़ फीचर को नहीं मिला। एक बनाने के बारे में कोई सुझाव?

उत्तर

6

इसके लिए अतिरिक्त काम की आवश्यकता होगी। यहां एक रूपरेखा है जो आपको करना होगा।

  • दो स्केल बनाएं, एक निचले भाग के लिए और ऊपरी भाग के लिए एक। तदनुसार डोमेन और श्रेणियां सेट करें।
  • निचले पैमाने पर मूल्यों को पास करें, उन्हें अधिकतम डोमेन मान पर कैप करें, जैसे कि लंबे समय तक मौजूद अधिकतम अधिकतम तक पहुंच जाएंगे।
  • ऊपरी पैमाने पर मान पास करें, न्यूनतम से कम वाले फ़िल्टरिंग।

आपको मूल रूप से दो ग्राफ बनाने की आवश्यकता है जो एक-दूसरे के साथ गठबंधन किए गए हैं ताकि इंप्रेशन दिया जा सके कि केवल एक ही है। यदि आप इसे ध्यान में रखते हैं, तो इसे करना मुश्किल नहीं होना चाहिए।

यहां एक त्वरित और गंदा proof of concept है जो डोमेन के बाहर मूल्यों के लिए बहुत लंबा होने से रोकने के लिए रैखिक पैमाने के .clamp(true) का उपयोग करता है।

+0

ऐसा करने का यह सही तरीका प्रतीत होता है। – cuckovic

+1

समझ में आता है। [यहां एक विकल्प है] (http://jsfiddle.net/9xbgT/2/) एकल पैमाने का उपयोग करके - 'ऊपरी' और 'निचला' के बजाय। एकल पैमाने पर, मेरा मतलब है 'var fullScale = d3.scale.linear()। डोमेन ([0,5,15,30])। श्रेणी ([280,180,160,0]) '। इससे आपको चार्ट को एक बार प्रति बार और एक वाई अक्ष के साथ खींचने देता है। फिर बार और अक्ष को खंडित करने के लिए ओवरले ब्रेक प्रतीकों। – meetamit

+0

धन्यवाद, मैंने इस दृष्टिकोण की कोशिश की और यह काम करता है, लेकिन कुछ नलसाजी की आवश्यकता है। आखिरकार मैंने एक अलग दृष्टिकोण लिया जो मेरे मामले में ठीक काम करता है और विकसित करना आसान है। फिर भी, आपका जवाब सवाल हल करता है। – kciesielski

1

d3fc-discontinuous-scale component किसी भी अन्य पैमाने (उदाहरण के लिए एक डी 3 रैखिक पैमाने) को अपनाना और विघटन की अवधारणा को जोड़ना। इन विचलनों को 'असंतोष प्रदाता' के माध्यम से निर्धारित किया जाता है, जिसका उपयोग पैमाने पर एक या अधिक 'अंतराल' बनाने के लिए किया जा सकता है।

उदाहरण के लिए, एक सीमा के दूर करने के लिए, आप पैमाने के रूप में इस का निर्माण कर सकते हैं:

var scale = scaleDiscontinuous(scaleLinear()) 
    .discontinuityProvider(discontinuityRange([50, 75])) 

यहां एक संपूर्ण उदाहरण से पता चलता है कि कैसे करने के लिए इस का उपयोग करने के पैमाने में एक 'ब्रेक' बनाने के लिए है उन मानों को प्रस्तुत करें जिनमें उनकी समग्र सीमा में बड़े अंतर हैं।

https://bl.ocks.org/ColinEberhardt/b60919a17c0b14d745c881f48effe681