डी 3 - अक्ष टिक्स के लिए तारों का उपयोग

Question

मैं एक्स-अक्ष (जैसे वर्ष 1, वर्ष 2, आदि के बजाय 0,1,2 इत्यादि) पर टिक के लिए लेबल के रूप में तारों का उपयोग करके एक बार चार्ट को क्रेट करना चाहता हूं। ।

मैं (जैसे, 0,1,2,3, आदि) के रूप में इस x- अक्ष के लिए सांख्यिक मानों का उपयोग करके शुरू किया:

 x = d3.scale.ordinal() 
     .domain(d3.range(svg.chartData[0].length)) //number of columns is a spreadsheet-like system 
     .rangeRoundBands([0,width], .1); 


    y = d3.scale.linear() 
     .domain(Math.min(d3.min(svg.chartData.extent),0), Math.max(d3.min(svg.chartData.extent),0)]) 
     .range([height, 0]) 
     .nice(); 

:

1) मैं अपने पर्वतमाला उत्पन्न 2) कुल्हाड़ियों करें:

 d3.svg.axis() 
     .scale(x); 

3) कुल्हाड़ियों पुन: आरेखित करें:

 svg.select(".axis.x_axis") 
     .call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0)); 

यह डिफ़ॉल्ट संख्यात्मक धुरी लेबल के साथ अच्छी तरह से काम करता है।

अगर मैं इस तरह एक्स tickValues ​​के लिए तार की एक सरणी इस्तेमाल करने की कोशिश ....

 d3.svg.axis() 
     .scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.] 

... जब मैं (के साथ या डेटा/सेटिंग में परिवर्तन के बिना) चार्ट पुनः बनाने, लेबल इस तरह स्वैप।

सूचना कैसे कर्नल 1 कर्नल 0 की जगह लेता है और इसके विपरीत।

क्या आपको पता है ऐसा क्यों होता है?

Answer 1

अद्यतन

बस svg.pointsNames सॉर्ट करने से पहले उनका tickValues ​​के रूप में लागू होते हैं। सुनिश्चित करें कि आप उन्हें उसी तरह से सॉर्ट करें जैसे आप अपना डेटा सॉर्ट करते हैं। इस तरह, एक-एक मैपिंग हमेशा आपके लेबल और मूल्यों के बीच बनाए रखा जाता है।

यदि मैं कर सकता हूं, तो यहां tickFormat` function देखें। यह मेरे लिए एक बेहतर विकल्प लगता है।

//Tick format example 
chart,xAxis.tickFormat(function(d, i){ 
    return "Year" + d //"Year1 Year2, etc depending on the tick value - 0,1,2,3,4" 
}) 

Answer 2

इसके लिए धन्यवाद ... मैंने इस फ़ंक्शन को इनलाइन के साथ नामों के बजाय नामों के साथ एक अलग एक्स-अक्ष श्रृंखला को संभालने के लिए इनलाइन के साथ उपयोग किया था।

गुटों में ऐरे श्रृंखला के सूचकांक द्वारा क्रमबद्ध सभी प्रासंगिक नाम होते हैं जो तब डेटा में इसके संबंधित इंडेक्स से मेल खाते हैं।

xAxis = d3.svg.axis().scale(xScale) 
      .tickFormat(function(d) { 

       if(seriesX == 'seriesValue'){ 
        return factions[d]} 

       else{ 
        return d} 
      })  
     .orient("bottom");