डी 3 बार चार्ट में कस्टम एक्स-अक्ष लेबल सेट करें?

Question

मैं इस पृष्ठ पर d3 crossfilter पुस्तकालय का उपयोग कर रहा:

http://jovansfreelance.com/bikestats/d3/crossfilter.php

आप दूसरे ग्राफ को देखें, तो आप X- अक्ष लेबल दिखाई देगा 0.0, 0.5, 1.0, ... , 6.0। मुझे उन लेबलों को सप्ताह के दिनों की आवश्यकता है, इसलिए 0.0 सोमवार होगा, 0.5 बिल्कुल नहीं होना चाहिए और मुझे नहीं पता कि यह क्यों दिखाई दिया क्योंकि डेटा में केवल संख्याएं हैं, 1.0 मंगलवार आदि होना चाहिए।

क्या कोई मुझे बता सकता है कि इसे कैसे पूरा किया जाए? ध्यान दें कि सभी 4 ग्राफ़ एक ही फ़ंक्शन को कॉल करते हैं, और मुझे केवल इस विशेष ग्राफ के लिए लेबल संशोधित करने की आवश्यकता है (हार्ड कोडिंग उन्हें ठीक है)।

Answer 1

आपको सामान्य स्केल की जांच करनी चाहिए। तब

var weekdays = ["Mon","Tues","Wed","Thurs","Fri","Sat","Sun"]; 
var formatDay = function(d) { 
    return weekdays[d % 7] + "day";  
} 

बस इसे पैमाने पर करने के गुजरती हैं, उदाहरण के लिए:: इस बीच, आप काफी आसानी से अपने खुद tickFormat कर सकते हैं

var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickFormat(formatDay); 

Answer 2

डी 3 v4 में मैं इसे बाहर निम्नलिखित तरीके से काम किया:

var data = ["Mon","Tues","Wed","Thurs","Fri","Sat","Sun"] 
var xScaleLabels = d3 
    .scalePoint() 
    .domain(data) 
    .rangeRound([50, width - 50]); // In pixels 

var axisTop2 = d3 
    .axisBottom() 
    .scale(xScaleLabels) 
    .ticks(data.length); 

svg 
    .append("g") 
    .call(axisTop2) 
    .attr("transform", "translate(" + margin.left + "," + height + ")");