D3 - sử dụng chuỗi cho các dấu trục

Question

Tôi muốn vẽ biểu đồ thanh bằng cách sử dụng các chuỗi làm nhãn cho các dấu trên trục x (ví dụ: Năm 1, Năm 2, vv thay vì 0,1,2, v.v ...) .

tôi bắt đầu bằng cách sử dụng các giá trị số cho trục x (ví dụ, 0,1,2,3, vv) như sau:

1) Tôi tạo ra dãy của tôi:

 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(); 

2) Thực hiện các trục:

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

3) Vẽ lại các trục:

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

Điều này hoạt động tốt với các nhãn trục số mặc định.

Nếu tôi cố gắng sử dụng một mảng các chuỗi cho tickValues ​​x như thế này ....

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

... khi tôi vẽ lại bảng xếp hạng (có hoặc không có thay đổi đối với dữ liệu/cài đặt), các nhãn trao đổi như thế này.

Chú ý cách Col 1 mất nơi Col 0 và ngược lại.

Bạn có biết tại sao điều này xảy ra không?

Answer 1

Cập nhật

Chỉ cần sắp xếp các svg.pointsNames trước khi bạn áp dụng chúng như tickValues. Đảm bảo bạn sắp xếp chúng chính xác giống như cách bạn sắp xếp dữ liệu của mình. Bằng cách này, một ánh xạ một-một luôn được duy trì giữa các nhãn của bạn và các giá trị đánh dấu.

Ngoài ra nếu có thể, hãy xem tickFormat` function tại đây. Điều này có vẻ là một lựa chọn tốt hơn cho tôi.

//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

Cảm ơn cho điều đó ... Tôi đã sử dụng chức năng này với một inline if-khoản để xử lý một loạt trục x khác nhau với những cái tên thay vì con số.

Các phe Array bao gồm tất cả các tên có liên quan được sắp xếp theo các chỉ mục của chuỗi sau đó chỉ được kết hợp với chỉ mục tương ứng của nó trong dữ liệu.

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

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

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