Javascript d3.js：为序数值生成轴记号

我想在x轴上使用以名称为值的顺序比例

let xScale = d3.scaleOrdinal()
            .domain(['Tony', 'Jessica', 'Andrew', 'Emily', 'Richard'])
            .range([0, bodyWidth]);

        
 container.append('g')
       .style('transform', 'translate(0px, 200px)')
       .call(d3.axisBottom(xScale))
       .tickFormat(clients, (d)=> d + ' position')
       .tickValues( clients.map(d => d.name) );

但我得到了一个错误：

类型错误：container.append（…）.style（…）.call（…）.tickFormat为 不是一个函数

我正在使用d3.js V5。

两个问题

首先，在返回

.call

时调用

.tickFormat

，而不是

.axisBottom

链。这就是为什么您会发现它不是一个函数，因为

.call

不会返回轴

其次，

.tickFormat

接受单个参数，该参数是创建每个轴刻度时要调用的函数。您正在将数据和作为访问器函数传递给它。每个域值都将传递给

.tickFormat

函数

让container=d3.select（'svg'）；
设xScale=d3.scaleOrdinal（）
.domain（['Tony'，'Jessica'，'Andrew'，'Emily'，'Richard']）
.范围（[01100200300400]）；
container.append（'g'）
.style（'transform'，'translate（100px，0px）'
.打电话(
d3.axisBottom（xScale）
.d格式（函数（d）{
console.log（d+‘位置’）；
返回d+‘位置’；
})
);

进行建议的更改已消除错误，但x轴上的值显示不正确。它们聚集在x轴的两端。@SouravKumar，从--

开始，域中的第一个元素将映射到范围中的第一个元素，第二个域值映射到第二个范围值，依此类推。如果范围中的元素少于域中的元素，则比例将重用范围开始处的值。

请参见上面的更新片段。顺便说一句，对于可能要使用带刻度或点刻度的轴，请参见。