D3轴标尺

Question

尝试学习D3并在标签轴上似乎相互堆叠。 我试图将scale调用转换为可重用的函数，但这可能使问题更加严重。 数据：

data=[];
data.push({'label':'#1','cost':15000,'saving':18000});
data.push({'label':'#2','cost':40000,'saving':65000});
data.push({'label':'#3','cost':55000,'saving':80000});
data.push({'label':'#4','cost':15000,'saving':30000});

规模：

function getY(d){
    return yScale = d3.scaleBand()
        .domain(d3.range(0, d.length))
        .range([0, (height-20)])
        .paddingInner(0.1)
        .paddingOuter(0.1)
}

尝试构建轴：

labels=[]
$.each(data,function(){
    labels.push(this.label);
})
var hAxis = d3.axisRight()
    .scale( getY(data) )
    .tickValues( labels )

一切似乎都正常，但标签似乎在翻译中接收到不正确的内容：

<g class="tick" opacity="1" transform="translate(0,NaN)"><line stroke="#000" x2="6">

我是从哪里收到NaN的，我假设编码比例不正确。

小提琴： https : //jsfiddle.net/L9mmy5d6/

Answer 1

tickValues指定应该具有刻度的值，而不是那些刻度。 您只能在此处在比例域中指定值。

如果您想要进行标准化的更改（例如，在每个数字上添加＃（并增加一个，以便数字从1开始）），则可以使用：

var hAxis = d3.axisRight()
    .scale( getY(data) )
    .tickFormat(function(d,i) { return "#"+(d+1) } )

（ 小提琴 ）

另外，如果您想采用与您相同的方法，则可以使用以下方法：

var hAxis = d3.axisRight()
    .scale( getY(data) )
    .tickFormat(function(d,i) { return labels[i] })

（ 小提琴 ）

请记住，如果使用索引，则刻度数应与标签数相对应。 在这种情况下，您还可以使用d设置标签，因为刻度线对应于索引。