nvd3線グラフ軸をフォーマットする

Question

nvd3（D3）ライブラリを使用して単純な折れ線グラフを修正しようとしていますが、どうにかしてコードを修正できないようです。ここで

はフィドルです：http://jsfiddle.net/sourabhtewari/o24ffe99/

データは、すべてのコードに対するこの

var reportData = [{ 
    "key": "ActualElapsedTime", 
    "color": "#d62728", 
    "values": [{ 
     "x": "2016-03-21T00:00:00", 
     "y": 100.00 
    }, { 
     "x": "2016-03-22T00:00:00", 
     "y": 99.00 
    }] 
    }]; 

のように見える私はチャートをプロットすることができません

nv.addGraph(function() { 
    var chart = nv.models.lineChart() 
    .margin({ 
     left: 100 
    }) //Adjust chart margins to give the x-axis some breathing room. 
    .useInteractiveGuideline(true) //We want nice looking tooltips and a guideline! 
    .transitionDuration(350) //how fast do you want the lines to transition? 
    .showLegend(true) //Show the legend, allowing users to turn on/off line series. 
    .showYAxis(true) //Show the y-axis 
    .showXAxis(true) //Show the x-axis 
    ; 

    chart.xAxis //Chart x-axis settings 
    .axisLabel('Date') 
    .tickFormat(function(d) { 
     return d3.time.format('%x')(new Date(d)) 
    }); 

    chart.yAxis //Chart y-axis settings 
    .axisLabel('Consistancy') 
    .tickFormat(d3.format('.02f')); 

    var reportData = [{ 
    "key": "ActualElapsedTime", 
    "color": "#d62728", 
    "values": [{ 
     "x": "2016-03-21T00:00:00", 
     "y": 100.00 
    }, { 
     "x": "2016-03-22T00:00:00", 
     "y": 99.00 
    }] 
    }]; 
    /* Done setting the chart up? Time to render it!*/ 

    d3.select('#chart svg') //Select the <svg> element you want to render the chart in. 
    .datum(reportData) //Populate the <svg> element with chart data... 
    .call(chart); //Finally, render the chart! 

    //Update the chart when window resizes. 
    nv.utils.windowResize(function() { 
    chart.update() 
    }); 
    return chart; 
}); 

のようなものです正しく。私はd3で十分な経験がありません。もし誰かが私にこれを解決させる助けができたら。私は感謝されます。

Answer 1

利用代わりにreportData内の文字列のDateオブジェクト：

var reportData = [{ 
    "key": "ActualElapsedTime", 
    "color": "#d62728", 
    "values": [{ 
     "x": new Date("2016-03-21T00:00:00"), 
     "y": 100.00 
    }, { 
     "x": new Date("2016-03-22T00:00:00"), 
     "y": 99.00 
    }] 
    }]; 

また、あなたのデータに基づいてtickValuesを設定することができます。

var tickValues = reportData[0].values.map(function(p) { return p.x}); 
chart.xAxis.tickValues(tickValues); 

の作業例：http://jsfiddle.net/LukaszWiktor/rcL0uot9/

結果：

Answer 2

Read Time formating of d3js

あなたは

var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse 

はparsedata関数は文字列を受け入れ、Dateオブジェクトに文字列を変換はparsedata機能が欠落しています。

ですので、データは以下のようになります。

var reportData = [{ 
    "key": "ActualElapsedTime", 
    "color": "#d62728", 
    "values": [{ 
     "x": parseDate("2016-03-21T00:00:00"), 
     "y": 100.00 
    }, { 
     "x": parseDate("2016-03-22T00:00:00"), 
     "y": 99.00 
    }] 
}];