Javascript 在D3中使用多行图进行分析时出错

我试图用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代码的一部分。全部代码都在这里

---

看起来您的

x.domain（）

可能未正确设置。

d3.extent

的第一个参数应该是

data.values

看起来您的

x.domain（）

可能没有正确设置。

d3.extent

的第一个参数不应该是

data.values

？@LarsKotthoff谢谢！这正是问题所在。请随意粘贴评论作为答案，这样我就可以给你评分了。

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