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

至于我的示例，您可以根据需要设置tickFormat文本标签的格式