Javascript D3 - 使用字符串进行轴刻度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11772115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
D3 - using strings for axis ticks
提问by Gian
I want to crate a bar chart using strings as the labels for the ticks on the x-axis (e.g., Year 1, Year 2, etc instead of 0,1,2, etc).
我想使用字符串作为 x 轴上刻度的标签来创建条形图（例如，第 1 年、第 2 年等，而不是 0、1、2 等）。
I started by using the numeric values for the x-axis (e.g., 0,1,2,3, etc) as follows:
我首先使用 x 轴的数值（例如，0、1、2、3 等），如下所示：
1) I generate my ranges:
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) Make the axes:
2）制作轴：
d3.svg.axis()
.scale(x);
3) Redraw the axes:
3）重绘轴：
svg.select(".axis.x_axis")
.call(make_x_axis().orient("bottom").tickSubdivide(1).tickSize(6, 3, 0));
This works well with default numeric axis labels.
这适用于默认的数字轴标签。
If I try to use an array of strings for the x tickValues like this....
如果我尝试使用字符串数组作为 x tickValues 这样的......
d3.svg.axis()
.scale(x).tickValues(svg.pointsNames); //svg.pointsNames = ["Year 1", "year 2", etc.]
... when I redraw the chart (with or without changes to the data/settings), the labels swap like this.
...当我重新绘制图表（更改或不更改数据/设置）时，标签会像这样交换。
Notice how Col 1 takes the place of Col 0 and vice versa.
注意第 1 列如何代替第 0 列，反之亦然。
Do you know why this happens?
你知道为什么会这样吗？
回答by Jibi Abraham
Update
更新
Just sort the svg.pointsNamesbefore you apply them as tickValues. Make sure you sort them in exactly the same way that you sort your data. This way, a one-one mapping is always maintained between your labels and tick values.
svg.pointsNames在将它们应用为 tickValues 之前，只需对它们进行排序。确保以与对数据进行排序完全相同的方式对它们进行排序。这样，标签和刻度值之间始终保持一对一的映射。
Also if I may, check out the tickFormat` functionhere. This seems a better option to me.
另外，如果可以，请在此处查看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"
})
回答by stinglsa
Thanks for that...I used this function with an inline if-clause to handle a different x-axis series with names instead of numbers.
谢谢你...我使用这个函数和一个内联 if 子句来处理不同的 x 轴系列，它带有名称而不是数字。
The factions Array consists of all relevant names sorted by the indexes of the series who then just get matched with its corresponding index in the data.
派系数组由所有相关名称组成，这些名称按系列的索引排序，然后与数据中的相应索引匹配。
xAxis = d3.svg.axis().scale(xScale)
.tickFormat(function(d) {
if(seriesX == 'seriesValue'){
return factions[d]}
else{
return d}
})
.orient("bottom");
