javascript - D3 での複数行グラフの解析エラー

Question

D3 を使用して複数行グラフを作成しようとしていますが、同じエラーが発生し続けます

エラー: d="MNaN,450LNaN,0LNaN,450LNaN,450LNaN,0LNaN,0" の解析に問題があります

線をグラフ化しようとすると発生するようです：

city.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.name); });

現在、次のデータセットを使用して単一の線をグラフ化しようとしています:

  {"name":"application_active_users","values":[{"value":0,"end_time":"2013-06-14T11:00:00.000Z"},{"value":1,"end_time":"2013-06-15T11:00:00.000Z"},{"value":0,"end_time":"2013-06-16T11:00:00.000Z"},{"value":0,"end_time":"2013-06-17T11:00:00.000Z"},{"value":1,"end_time":"2013-06-18T11:00:00.000Z"},{"value":1,"end_time":"2013-06-19T11:00:00.000Z"}]}

データソースに何か問題があると思います。私のデータソースの設定方法にすぐに問題が発生することはありますか?

D3 コードの一部を次に示します。コード全体はhttp://jsfiddle.net/hy4Hz/にあります。

 var payload;
 var storedMetrics = [];
 var metricCount = 1;
 var graphData = [];

 var margin = {
     top: 20,
     right: 20,
     bottom: 30,
     left: 50
 },
 width = 960 - margin.left - margin.right,
     height = 500 - margin.top - margin.bottom;

 //var parseDate = d3.time.format("%Y-%m-%d").parse;
 //var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ").parse;
 var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse;
 var color = d3.scale.category10();

 var x = d3.time.scale()
     .range([0, width]);

 var y = d3.scale.linear()
     .range([height, 0]);

 var xAxis = d3.svg.axis()
     .scale(x)
     .orient("bottom");

 var yAxis = d3.svg.axis()
     .scale(y)
     .orient("left");

 var line = d3.svg.line()
     .x(function (d) {
     return x(d.end_time);
 })
     .y(function (d) {
     return y(d.value);
 });

 var svg = d3.select("body").append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
     .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 x.domain(d3.extent(

 data, function (d) {
     return d.end_time;
 }));

 y.domain([
 d3.min(metrics, function (c) {
     return d3.min(c.values, function (v) {
         return v.value;
     });
 }),
 d3.max(metrics, function (c) {
     return d3.max(c.values, function (v) {
         return v.value;
     });
 })]);

 svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis);

 svg.append("g")
     .attr("class", "y axis")
     .call(yAxis)
     .append("text")
     .attr("transform", "rotate(-90)")
     .attr("y", 6)
     .attr("dy", ".71em")
     .style("text-anchor", "end")
     .text("Temperature (ºF)");

 var city = svg.selectAll(".city")
     .data(metrics)
     .enter().append("g")
     .attr("class", "city");

 city.append("path")
     .attr("class", "line")
     .attr("d", function (d) {
     return line(d.values);
 })
     .style("stroke", function (d) {
     return color(d.name);
 });

 city.append("text")
     .datum(function (d) {
     return {
         name: d.name,
         value: d.values[d.values.length - 1]
     };
 })
     .attr("transform", function (d) {
     return "translate(" + x(d.value.end_time) + "," + y(d.value.value) + ")";
 })
     .attr("x", 3)
     .attr("dy", ".35em")
     .text(function (d) {
     return d.name;
 });