D3.JS-使用序数刻度轴格式化刻度值

Question

我在我的轴上使用了序数比例：

var xBarScale = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1)
    .domain(d3.range(data.length));

var xBarAxis = d3.svg.axis()
    .scale(xBarScale)
    .orient("bottom");

我的刻度标签位于我的数据数组中。格式化我的刻度值（使用D3方法）的最佳方法是什么，而不是像我在这里完成的那样简单地列出数组中的每一个：

 xBarAxis.tickValues([data[0].q,data[1].q,data[2].q,data[3].q,data[4].q]);

Answer 1

我正在使用 D3 v4 ，我就是这样做的：

var xBarScale = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1)
    .domain(d3.range(data.length));

var xBarAxis = d3.axisBottom( xBarScale )
    .tickFormat((d)=> d + ' position' ) // just an example of formatting each Tick's text
    .tickValues( data.map(d => d.q) )  // creates an Array of `q` values

关于我的示例，您可以设置this question "Sort array by calculated distance in Swift"来格式化您希望的文本标签