Javascript D3-将字符串用于轴刻度

我想制作一个条形图，使用字符串作为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);

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

3） 重新绘制轴：

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

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

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

如果我尝试使用一个字符串数组来表示x值，比如

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

。。。当我重新绘制图表时（无论是否更改数据/设置），标签都会这样交换

请注意列1如何取代列0，反之亦然

---

你知道为什么会发生这种情况吗？

更新

只需对svg.pointsNames进行排序，然后再将它们作为值应用。确保按照与数据排序完全相同的方式对它们进行排序。这样，标签和记号值之间始终保持一一映射

如果可以的话，请在这里查看。这对我来说似乎是个更好的选择

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

---

谢谢…我使用这个函数和一个内联if子句来处理一个不同的x轴系列，它的名称不是数字

派系数组由按系列索引排序的所有相关名称组成，然后这些名称与数据中相应的索引匹配

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

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

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

---

感谢Jibi，pointsNames在与数字数据一起生成时进行了排序：当我将列填充到图表中时，我将名称推送到names数组中。我还检查了控制台中的pointsNames是否始终处于正确的顺序。奇怪的是，在图表第一次初始化时就开始了，然后交换，然后保持交换。因此，它只在第一次重新绘制时进行交换。感谢链接：在我的案例中，我应该如何使用axis.tickFormat（[format]）？再次感谢。我同意@Jibi，tickFormat函数是解决这个问题的更干净的方法。@Pablo，你能告诉我如何在我的例子中使用它吗？axis.tickFormat（[format]）？如何形成一个[0、1、2等]作为来自另一个数组的字符串使用？我认为最好使用以前的数字刻度值（1、2、3、4等），并使用前面提到的

tickFormat

方法将这些刻度格式化为字符串（“第1年”、“第2年”…）。在您的例子中：

d3.svg.axis（x.scale.tickFormat（函数（d）{return“Year”+d；}）tickFormat函数非常有效。注意，在上面的示例中，它还有第二个参数“i”，它是记号的索引。所以，关于，你可以返回“Year”+（i+1）作为“Year1，Year2”，等等。