मैं nvd3 का उपयोग कर कॉलम चार्ट पर घूर्णन वाले एक्स-अक्ष लेबल कैसे रख सकता हूं?

Question

मैं nvd3 के multiBarChart का उपयोग कर एक बार चार्ट के निर्माण और घुमाया x- अक्ष लेबल की स्थिति को समायोजित करने की आवश्यकता कर रहा हूँ:

var chart = nv.models.multiBarChart(); 
... 
chart.rotateLabels(-90); 

मैं स्तंभ लेबल चाहते हैं चार्ट ओवरलैप नहीं करने के लिए और केंद्रित हो प्रत्येक बार के नीचे। मैं चार्ट प्लॉट करने और उन्हें समायोजित करने के बाद लेबल का चयन कर सकता हूं लेकिन क्या कोई आसान तरीका है?

Answer 1

मुझे यह संभालने का सबसे अच्छा तरीका एक्स-अक्ष टिक लेबल के घूर्णन को निष्पादित करना है। क्यूं कर? चूंकि एनवीडी 3 घूर्णन और संबंधित अनुवादों को सही ढंग से संभाल नहीं रहा है। अपनी छवि को देखें, और आप देखेंगे कि लाइब्रेरी रोटेशन को उन स्तंभों के नीचे सीधे लेबल से अनुवाद करने की अनुमति देती है जो वे दर्शाते हैं। यह axis.tickPadding() मानों को मिशेल करना शुरू करता है, और इसी तरह।

chart.margin({bottom: 60}); 

हम तो अनुवाद कर सकते हैं और लेबल बारी बारी से:

var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g'); 
xTicks 
    .selectAll('text') 
    .attr('transform', function(d,i,j) { return 'translate (-10, 25) rotate(-90 0,0)' }) ; 

पहली बात यह है कि आप क्या करने की जरूरत चार्ट अनुवाद लेबल के लिए पर्याप्त जगह है, इसलिए की तरह है कि यह सुनिश्चित करने के लिए है

लेबल अब इस तरह दिखना:

Answer 2

एकाधिक ग्राफ के लिए, अपने "'#' + containerId + 'svg" d3.select में नीचे की तरह जोड़ सकते हैं:

//Rotate x-axis label 
var xTicks = d3.select('#' + containerId + ' svg .nv-x.nv-axis > g').selectAll('g'); 
xTicks 
    .selectAll('text') 
    .attr('transform', function(d,i,j) { return 'translate (-15, 60) rotate(-90 0,0)' }); 

फिर भी, @River जवाब के लिए धन्यवाद।

Answer 3

यह मेरे लिए काम किया। मुख्य कारण यह है कि मैं इसे सबमिट कर रहा हूं कि एंकर बदलना मैन्युअल रूप से स्थिति का अनुवाद करने से बेहतर है।

var xTicks = d3.select('.nv-x.nv-axis > g > g',_this.context.element).selectAll('g').selectAll('text'); 
xTicks.attr('transform', function() { return 'rotate(' + angle + ' 0,0)' }) ; 
xTicks.attr('text-anchor',function() { 
    var anchor; 
    if(angle > 0){ anchor = 'start'; } 
    else if(angle < 0){ anchor = 'end'; } 
    else { anchor = 'middle'; } 
    return anchor; 
}); 

Answer 4

तुम जो भी पाठ रोटेशन शुरू/मध्य/अंत

d3.select('.nv-x.nv-axis > g > g').selectAll('g.tick text').style('text-anchor', 'start'); //start/middle/end 

Answer 5

मेरे लिए काम किया निम्नलिखित देना है: उस के लिए

chart.axislist["xAxis"]["rotateLabels"]= -45