D3 - 使用字符串作为轴刻度

Question

我想创建一个条形图,使用字符串作为x轴上刻度线的标签(例如,1年级,2年级等,而不是0,1,2等).

我开始使用x轴的数值(例如,0,1,2,3等),如下所示:

1)我生成我的范围:

     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)制作轴:

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

3)重绘轴:

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

这适用于默认数字轴标签.

如果我尝试使用像这样的x tickValues的字符串数组....

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

...当我重绘图表时(对数据/设置进行更改或不进行更改),标签会像这样交换.

注意Col 1如何取代Col 0,反之亦然.

你知道为什么会这样吗？

Answer 1

更新

只需svg.pointsNames在将它们应用为tickValues之前对其进行排序.确保按照与排序数据完全相同的方式对它们进行排序.这样,您的标签和刻度值之间始终保持一对一的映射.

如果可以的话,请在这里查看tickFormat`函数.这对我来说似乎是一个更好的选择.

//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"
})