पूर्णांक लेबल में d3.svg.axis को कैसे सीमित करें?

Question

क्या ग्राफ पर प्रदर्शित d3.svg.axis पूर्णांक लेबल की संख्या को सीमित करने की कोई संभावना है? उदाहरण के लिए इस ग्राफ ले लो। यहां केवल 5 आकार हैं: [0, 1, 2, 3, 4]। हालांकि, टिक .5, 1.5, 2.5 और 3.5 के लिए भी प्रदर्शित होते हैं।

Answer 1

आप के बजाय d3.format का उपयोग अपने स्वयं के लेखन में सक्षम होना चाहिए इसके लिए प्रारूप समारोह।

d3.svg.axis() 
    .tickFormat(d3.format("d")); 

आप भी अपने पैमाने जो अक्ष स्वचालित रूप से डिफ़ॉल्ट रूप से प्रयोग करेंगे पर tickFormat उपयोग कर सकते हैं।

Answer 2

मुझे एहसास हुआ है कि यह, इन मूल्यों को छिपाने के लिए पर्याप्त है बल्कि पूरी तरह से बाहर करने के लिए की तुलना में। यह प्रयोग किया जा सकता tickFormat (https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format) के रूप में इस तरह के:

d3.svg.axis() 
    .tickFormat(function(e){ 
     if(Math.floor(e) != e) 
     { 
      return; 
     } 

     return e; 
    }); 

Answer 3

d3.format("d") का उपयोग टिकफॉर्मैट के रूप में सभी परिदृश्यों में काम नहीं कर सकता है (see this bug)। विंडोज फोन डिवाइस (और शायद अन्य) पर अपर्याप्त गणना उन स्थितियों का कारण बन सकती है जहां पूर्णांक संख्याओं के रूप में टिकों को सही ढंग से नहीं पहचाना जाता है, i। ई। "3" का एक टिक आंतरिक रूप से 2.99 99 99 99 99 997 के रूप में संग्रहीत किया जा सकता है जो d3.format("d") के लिए एक पूर्णांक संख्या नहीं है।

परिणामस्वरूप धुरी बिल्कुल प्रदर्शित नहीं होती है। यह व्यवहार विशेष रूप से टिक में स्पष्ट हो जाता है।

एक संभावित समाधान एक ईपीएसलॉन मान निर्दिष्ट करके मशीन त्रुटि को सहन करना है। मूल्यों सटीक पूर्णांक इस तरह से होना जरूरी नहीं है, लेकिन एप्सिलॉन रेंज (जो आपके डेटा त्रुटि से जिस तरह से कम होना चाहिए) के लिए अगले पूर्णांक से अलग हो सकता:

var epsilon = Math.pow(10,-7); 

var axis = d3.svg.axis().tickFormat(function(d) { 
    if (((d - Math.floor(d)) > epsilon) && ((Math.ceil(d) -d) > epsilon)) 
     return; 
    return d; 
} 

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

var axis = d3.svg.axis().ticks(dataMax).tickFormat(d3.format(".0f"))