錯誤D3

Question

我試圖創建一個使用D3多線圖，我一直在同樣的錯誤運行

Error: Problem parsing 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"}]} 

我假設somethi ng與我的數據源錯誤。有沒有人看到我的數據源如何設置的直接問題？

這是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; 
}); 

Answer 1

看起來您的x.domain()可能沒有正確設置。 d3.extent的第一個參數應該是data.values。