डी 3 गैर-निरंतर तिथियां डोमेन एक्स-एक्सिस

Question

पर अंतराल देता है मैं कुछ समय श्रृंखला डेटा प्लॉट करना चाहता हूं जो निरंतर नहीं है (सप्ताहांत, छुट्टियों आदि के लिए तिथियों में अंतराल ..)। यह दैनिक डेटा है।

डेटा तरह दिखता है:

date,value 
1/2/15,109.33 
1/5/15,106.25 
1/6/15,106.26 
1/7/15,107.75 
1/8/15,111.89 
1/9/15,112.01 
1/12/15,109.25 
1/13/15,110.22 
... 

तो मैं परिभाषित मेरी x और yscales:

var x = d3.time.scale().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

और मेरे स्रोत डेटा से डोमेन सेट:

x.domain(d3.extent(data, function(d) { return d.date; })); 
y.domain(d3.extent(data, function(d) { return d.value; })); 

समस्या हालांकि, यह है कि मेरी तिथियों में अंतराल है उन्हें। और मेरे एक्स-अक्ष में अब उन लापता तिथियां शामिल हैं (d3.time.scale() क्या यह स्वचालित रूप से मुझे लगता है क्योंकि यह एक निरंतर सीमा के लिए मानचित्र है?)।

.extent()date में अधिकतम और न्यूनतम मान पाता है तो .domain() एक्स-अक्ष के लिए सीमा के रूप में उन अधिकतम और न्यूनतम मान देता है। लेकिन मुझे यकीन नहीं है कि अंतराल को कैसे संभालें और सीमा में गैर अंतर की तारीखों को वापस कैसे करें।

तो मेरा सवाल है: मैं अपने एक्स-अक्ष श्रेणी में केवल मेरे डेटा सेट में मौजूद तिथियां कैसे शामिल कर सकता हूं? और "रिक्त स्थान भरें" नहीं। क्या मुझे d3.time.scale().range() के साथ खेलना चाहिए? या मुझे एक अलग scale का उपयोग करने की आवश्यकता है?

ऐसा करने का सही तरीका क्या है? क्या कोई मुझे सही दिशा में इंगित कर सकता है या कुछ उदाहरण दे सकता है? धन्यवाद!

इसके अलावा, मैं केवल सादे डी 3 और जावास्क्रिप्ट के साथ हल करना चाहता हूं। मुझे किसी तीसरे पक्ष के अमूर्त पुस्तकालयों का उपयोग करने में कोई दिलचस्पी नहीं है।

Answer 1

जैसा कि लार्स कोथोफ बताते हैं, आप एक ऑर्डिनल एक्स अक्ष बना सकते हैं, जो एक समय पैमाने की तरह "दिखता है"। मान लीजिए कि आप अपनी टाइम सीरीज़ को लाइन के रूप में प्लॉट करना चाहते हैं, यहां एक उदाहरण है कि इसे कैसे करें: http://jsfiddle.net/ee2todev/3Lu46oqg/

यदि आप तिथियों के लिए अपना प्रारूप कस्टमाइज़ करना चाहते हैं, उदा। दिन (सप्ताह के) के रूप में तारीख का प्रतिनिधित्व करें, दिन और महीने आपको अपनी स्ट्रिंग को पहले एक तारीख में परिवर्तित करना होगा। मैंने एक उदाहरण जोड़ा जो एक सामान्य जर्मन प्रारूप में तिथियों को स्वरूपित करता है। लेकिन आप आसानी से अपनी आवश्यकताओं के लिए कोड समायोजित कर सकते हैं। http://jsfiddle.net/ee2todev/phLbk0hf/

अंतिम, लेकिन कम से कम नहीं है, तो आप

axis.tickValues([values]) 

का उपयोग दिनांकों आप प्रदर्शित करना चाहते का चयन कर सकते हैं। यह भी देखें: https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat

Answer 2

d3fc-discontinuous-scale घटक और discontinuities की अवधारणा को जोड़ने (उदाहरण के एक d3 समय के पैमाने के लिए) किसी भी अन्य पैमाने adapts।

ये विघटन discontinuitySkipWeekends में निर्मित 'असंतोष प्रदाता' के माध्यम से निर्धारित किए जाते हैं जो आपको सप्ताहांत छोड़ने की अनुमति देता है।

यहाँ एक उदाहरण है:

const skipWeekendScale = fc.scaleDiscontinuous(d3.scaleTime()) 
    .discontinuityProvider(fc.discontinuitySkipWeekends()); 

और यहाँ एक पूरा डेमो है: https://bl.ocks.org/ColinEberhardt/0a5cc7ca6c256dcd6ef1e2e7ffa468d4