NVD3.js - x 축 범주가 lineplusbar에 대해 올바르게 표시되지 않습니다.

Question

축이 "1x", "2x", 3x "로 표시되도록하고 싶습니다. 다른 그래프 유형에서 x 값은 값에서 올바르게 가져옵니다. 그러나 이것은 내가 더 이상 제대로 기능

.x(function(d,i) { return i }); 

그래프의 표시를 주석없는 경우 나. 내가

chart.xAxis.tickFormat(function(d) { return d3.format(',f')(d+1)+"x" }); 

에 추가 할 수 있습니다 알고있다. 다른 것 같다하지만이 경우 작동하지 않을 속임수입니다 x 축은 다른 문자열입니다.

번호 : https://github.com/tvinci/webs/blob/gh-pages/lineplusbar.html

예 : 페이지 http://tvinci.github.io/webs/lineplusbar.html

번호 :

nv.addGraph(function() { 
    //var testdata = exampleData(); 
    var chart = nv.models.linePlusBarChart() 
      .margin({top: 30, right: 60, bottom: 50, left: 70}) 
      //if this is commented out, the graph does not display properly 
      .x(function(d,i) { return i }); 
    //this is the cheat I use to show the correct X axis 
    //chart.xAxis.tickFormat(function(d) { return d3.format(',f')(d+1)+"x" }); 
    chart.y1Axis.tickFormat(d3.format(',f')); 
    chart.y2Axis.tickFormat(d3.format(',f')); 

    //forces the chart to start at 0 
    // if you set this to [0,100] and your data's domain is -10 to 110, the domain will be [-10,110] 
    chart.lines.forceY([0]); 

    d3.select('#chart svg').datum(eval("overview_data")).transition().duration(500).call(chart); 
     d3.selectAll("rect.nv-bar").style("fill", function(d, i){return i > 50 ? "red":"blue";}); 
    nv.utils.windowResize(chart.update); 

데이터 :

var overview_data=[ 
    { "key" : "Achieved" , "bar": true,"values" : [ [ "1x" , 30] , [ "2x" , 70] , [ "3x" , 200] ]} , 
    { "key" : "Required" , "values" : [ [ "1x" , 50] , [ "2x" , 100] , [ "3x" , 150] ]} 
    ].map(function(series) {series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });return series;}); 

});

Answer 1

내가보기에 유일한 트릭은 d3.format()이 필요하지 않다면 사용하지 않는 것입니다. 그냥 이렇게 :

chart.xAxis.tickFormat(function(d) { return (d+1)+"x" }); 

jsFiddle을 : http://jsfiddle.net/chrisJamesC/RqvJR/

Answer 2

@ 크리스를 - 그건 내 속임수입니다. :) x 값이 "Monday"와 같이 변경되면 작동하지 않습니다.

올바른 값을 추출하기 위해 인덱스를 데이터 객체에 공급할 수 있다는 것을 알았습니다.

chart.xAxis.tickFormat(function(d) {return overview_data[0].values[d].x; });