Làm thế nào tôi có thể định vị nhãn xoay trục x trên biểu đồ cột bằng cách sử dụng nvd3?

Question

Tôi đang xây dựng một biểu đồ thanh sử dụng multiBarChart nvd3 và cần phải điều chỉnh vị trí của nhãn trục x xoay:

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

Tôi muốn các nhãn cột để không chồng chéo bảng xếp hạng và được tập trung dưới mỗi thanh. Tôi có thể chọn các nhãn sau khi vẽ biểu đồ và điều chỉnh chúng nhưng có cách nào dễ hơn không?

Answer 1

Cách tốt nhất mà tôi đã tìm thấy để xử lý việc này là tự thực hiện việc xoay vòng các nhãn đánh dấu x trục. Tại sao? Bởi vì NVD3 không xử lý vòng xoay và các bản dịch liên quan một cách chính xác. Nhìn vào hình ảnh của bạn, và bạn sẽ thấy rằng thư viện cho phép vòng xoay dịch các nhãn ra trực tiếp dưới các cột mà chúng đại diện. Nó cũng bắt đầu xử lý các giá trị axis.tickPadding(), v.v.

Điều đầu tiên mà bạn cần làm là để đảm bảo rằng bảng xếp hạng có đủ không gian cho các nhãn dịch, như vậy:

chart.margin({bottom: 60}); 

Sau đó chúng tôi có thể dịch và xoay nhãn:

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)' }) ; 

Các nhãn bây giờ nhìn như thế này:

Answer 2

Đối với nhiều đồ thị, bạn có thể thêm "'#' + containerId + 'svg" trong d3.select như dưới đây:

//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)' }); 

Anyways, Cảm ơn bạn @River câu trả lời.

Answer 3

Điều này phù hợp với tôi. Lý do chính tôi gửi này là thay đổi neo là đẹp hơn so với dịch vị trí bằng tay.

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

Dù bạn xoay văn bản là cung cấp bắt đầu/giữa/cuối

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

Answer 5

Sau đây làm việc cho tôi:

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