D3轴标尺

时间:2017-12-19 17:25:28

标签: javascript d3.js

尝试学习D3并且在标签轴上似乎相互堆叠。 我试图将规模调用转换为可重用的函数,但这可能会加剧这个问题。 数据:

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/

1 个答案:

答案 0 :(得分:0)

tickValues指定哪些值应该有刻度,而不是那些刻度应该是什么样子。您只能在此处指定比例域中的值。

如果你想要一个标准化的改变(例如,在每个数字上添加#(并加1,使数字从1开始)),那么你可以使用:

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

fiddle

或者,如果你想采用与你相同的方法,你可以使用类似的东西:

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

fiddle

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