Error parsing with multiline graph in D3

I'm trying to create a multiline graph using D3, and I keep running across the same error > Error: Problem parsing d="MNaN,450LNaN,0LNaN,450LNaN,450LNaN,0LNaN,0" Which seems to occur when I try to graph my line: city.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.values); }) .style("stroke", function(d) { return color(d.name); }); I'm trying to graph a single line at the moment with the following data set: {"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"}]} I'm assuming something is wrong with my datasource. Does anyone see an immediate issue with how my datasource is set up? Here is a portion of the D3 code. The entire code is here 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; });
It looks like your x.domain() might not be set up correctly. Shouldn't the first argument to d3.extent be data.values?

以上就是Error parsing with multiline graph in D3的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏