मैं d3.js में घंटों और मिनटों के लिए कस्टम अक्ष फॉर्मेटर कैसे बना सकता हूं?

Question

मुझे एक डेटासेट मिला है जिसे मैं d3.js. के साथ ग्राफिंग कर रहा हूं। एक्स अक्ष समय (मिनटों में) का प्रतिनिधित्व करता है। मैं इस अक्ष को hh:mm प्रारूप में प्रदर्शित करना चाहता हूं, और मुझे इसे डी 3 के भीतर साफ करने का कोई तरीका नहीं मिल रहा है।

मेरे अक्ष कोड की तरह दिखता है:

svg.append('g') 
    .attr('class', 'x axis') 
    .attr('transform', 'translate(0,' + height + ')') 
    .call(d3.svg.axis() 
    .scale(x) 
    .orient('bottom')); 

कौन सा मिनट कि [100, 115, 130, 140] तरह लग रहा है में लेबल उत्पन्न करता है, आदि

मेरे वर्तमान समाधान के बाद वे उत्पन्न किया गया है text तत्वों का चयन करने के लिए है , और उन्हें फ़ंक्शन के साथ ओवरराइड करें:

svg.selectAll('.x.axis text') 
    .text(function(d) { 
     d = d.toFixed(); 
     var hours = Math.floor(d/60); 
     var minutes = pad((d % 60), 2); 
     return hours + ":" + minutes; 
    }); 

यह धुरी को आउटपुट करता है [1:40, 1:55, 2:10], आदि जैसे

लेकिन यह जंकी महसूस करता है और d3.format के उपयोग से बचाता है। क्या इन लेबलों को बनाने का कोई बेहतर तरीका है?

Answer 1

आप पूर्ण समय है, तो आप शायद जावास्क्रिप्ट Date objects बजाय सरल संख्या करने के लिए अपने एक्स डेटा परिवर्तित करना चाहते हैं, और फिर आप d3.time.scale और d3.time.format उपयोग करना चाहते हैं। का एक उदाहरण "hh: mm" एक धुरी के लिए प्रारूप होगा:

d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickFormat(d3.time.format("%H:%M")); 

और वास्तव में, आप बिल्कुल एक टिक प्रारूप निर्दिष्ट करने की आवश्यकता नहीं कर सकते; आपके पैमाने के डोमेन और टिकों की संख्या के आधार पर, default time scale format आपकी आवश्यकताओं के लिए पर्याप्त हो सकता है। वैकल्पिक रूप से, यदि आप पूर्ण नियंत्रण चाहते हैं, तो आप स्केल पर टिक अंतराल भी निर्दिष्ट कर सकते हैं। उदाहरण के लिए, के लिए हर पंद्रह मिनट टिक्स, आप कह सकते हैं:

d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .ticks(d3.time.minutes, 15) 
    .tickFormat(d3.time.format("%H:%M")); 

आप रिश्तेदार समय, यानी अवधि है, तो (और इसलिए बजाय मिनट का प्रतिनिधित्व संख्या पूर्ण तिथि होती है), तो आप इन फ़ॉर्मेट कर सकते हैं एक मनमानी युग चुनकर और ऑन-द-फ्लाई को परिवर्तित करके तिथियों के रूप में। इस तरह आप डेटा को संख्याओं के रूप में छोड़ सकते हैं। उदाहरण के लिए:

var formatTime = d3.time.format("%H:%M"), 
    formatMinutes = function(d) { return formatTime(new Date(2012, 0, 1, 0, d)); }; 

चूंकि केवल मिनट और घंटे प्रदर्शित होंगे, इससे कोई फ़र्क नहीं पड़ता कि आप किस युग को चुनते हैं। यहाँ इस तकनीक का इस्तेमाल अवधियों का वितरण फ़ॉर्मेट करने के लिए एक उदाहरण है:

• http://bl.ocks.org/3048166