尝试使用tickValue标记H轴时出现D3错误

Question

我有一个这样的对象

bardata={
  0:{
   value:10
   label:A
  }
  1:{
   value:15
   label:B
  }
  2:{
   value:13
   label:C
  }
      3:{

   value:14
   label:D
  } 

}

现在我使用这些数据来构建一个图形，其中y轴是一个线性比例，其中 data.value 作为参数，图表结果很好，但有一点，我似乎无法将 data.label 用于x轴 这是我得到的

注意：以上数据不是我的实际数据

我试图标记y轴的方式是：

    var hAxis = d3.svg.axis()
        .scale(xScale)
        .orient('bottom')
        .tickValues( function(){   //this is where the error comes from,it doesn't like the array I feed it
                        var labelArray=[] 
                        bardata.forEach(function(d){
                        labelArray.push(String(d.label))
                        })
                    console.log('labelArray ',labelArray);//it is array of strings      
                    return labelArray;

                    });

     var hGuide=d3.select('svg').append('g') ;
      hAxis(hGuide);
      hGuide.attr('transform','translate('+margin.left+','+(height+margin.top)+')');//Here is where I translate the ticks
      var path =hGuide.selectAll('path')
    console.log(path); 
    hGuide.selectAll('path')
        .style({ fill: 'none', stroke: "#000"})
    hGuide.selectAll('line')
        .style({ stroke: "#000"})
}

我收到控制台错误：

Error: Invalid value for <g> attribute transform="translate(NaN,0)"

不确定我在这里做错了什么