Javascript D3折线图：x线函数始终呈现NaN

好的，对于下面的代码，x的行函数返回NaN。我不知道为什么。我尝试将时间值更改为1到9，并使用线性刻度，我将它们转换为时间（这只是为了证明概念，因此这些值暂时可以调整），并尝试使用“新日期”，但运气不佳

我做错了什么？为什么X总是NaN

其中一个记录数据点的示例：

x:d为：2015-06-01 x（新日期（d期））为NaN y:d是65.54347826086956

jQuery(document).ready(function ($) {


  var margin = {top: 20, right: 30, bottom: 40, left: 50},
  width = 300 - margin.left - margin.right,
  height = 150 - margin.top - margin.bottom;

  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 color = d3.scale.category10();

  var line = d3.svg.line()
    .x(function(d) {console.log('d is : ', d.Period,' x(new Date(d.Period)) is ', x(new Date(d.Period))); return x(new Date(d.Period)); })
    .y(function(d) {console.log('y:d is ', y(d.Value)); return y(d.Value); })

  var svg = d3.select("#pipeline-chart-render")
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
    .append('g')
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

  // This separates the data into the lines we want, although the data is stored
  // In the same original object.
  var keys = color.domain(d3.keys(data[0].values[0]).filter(function(key) { 
    if (key === 'Amount'
     || key === 'Quantity') {
        return key
    }
  }));

  // This returns the data into two separate objects which can be graphed.
  // In this case, Amount and Quantity.
  var datasets = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {Period: d.values[0].Time, Value: +d.values[0][name]};
      })
    };
  });

  console.log('datasets is: ', datasets);

  // set the minYDomainValue to zero instead of letting it be a lingering magic number.
  var minDomainValue = 0

  // x.domain([
  //   minDomainValue,
  //   d3.max(datasets, function(c) { return d3.max(c.values, function(v) { console.log(v); return v.Time }); })
  // ])

  x.domain(d3.extent(datasets, function(d) { console.log(d); return new Date(d.values[0].Time); }));

  y.domain([
    minDomainValue,
    // d3.min(datasets, function(c) { return d3.min(c.values, function(v) { return v.Time; }); }),
    d3.max(datasets, function(c) { return d3.max(c.values, function(v) { return v.Value; }); })
  ])

  // Append the x-axis class and move axis around.
  svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)

  // Append the y-axis class.
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)

  var dataset = svg.selectAll('.pipeline')
    .data(datasets);

  console.log(dataset);

  dataset.enter()
    .append('g')
    .attr('class', 'pipeline');

  dataset.append('path')
    .attr('class', 'line')
    .attr('d', function(d) { return line(d.values); })
    .attr("data-legend",function(d) { return d.name})
    .style("stroke", function(d) { return color(d.name); })

  dataset.exit().remove()

});

var data = [
  {
    key: 1,
    values: [
      {
        Amount: 33,
        Quantity: 22,
        Time: '2015-01-01'
      }
    ]
  },
  {
    key: 2,
    values: [
      {
        Amount: 52,
        Quantity: 20,
        Time: '2015-02-01'
      }
    ]
  },
  {
    key: 3,
    values: [
      {
        Amount: 63,
        Quantity: 30,
        Time: '2015-03-01'
      }
    ]
  },
  {
    key: 4,
    values: [
      {
        Amount: 92,
        Quantity: 60,
        Time: '2015-04-01'
      }
    ]
  },
  {
    key: 5,
    values: [
      {
        Amount: 50,
        Quantity: 29,
        Time: '2015-05-01'
      }
    ]
  },
  {
    key: 6,
    values: [
      {
        Amount: 53,
        Quantity: 25,
        Time: '2015-06-01'
      }
    ]
  },
  {
    key: 7,
    values: [
      {
        Amount: 46,
        Quantity: 12,
        Time: '2015-07-01'
      }
    ]
  },
  {
    key: 8,
    values: [
      {
        Amount: 52,
        Quantity: 15,
        Time: '2015-08-01'
      }
    ]
  },
  {
    key: 9,
    values: [
      {
        Amount: 55,
        Quantity: 20,
        Time: '2015-09-01'
      }
    ]
  }
]

// var formatTime = function(date) {
//   var formatter = d3.time.format("%Y-%m").parse;
//   return formatter(date);
// }

---

要回答您的具体问题，您没有正确设置x域，我建议您：

var minDate = d3.min(datasets, function(d0){
  return d3.min(d0.values, function(d1){
    return d1.Period;
  })
}),
maxDate = d3.max(datasets, function(d0){
  return d3.max(d0.values, function(d1){
    return d1.Period;
  })
});
x.domain([minDate, maxDate]);

为了实现这一点，请采纳我的下一个建议，停止新的约会（疯狂，从一开始就强迫你的时间到日期。我强烈建议你使用，而不是尝试自己进行转换：

var tP = d3.time.format("%Y-%m-%d");
// This returns the data into two separate objects which can be graphed.
// In this case, Amount and Quantity.
var datasets = color.domain().map(function(name) {
  return {
    name: name,
    values: data.map(function(d) {
      return {
        Period: tP.parse(d.values[0].Time), //<-- just convert once!
        Value: +d.values[0][name]
      };
    })
  };
});

---

完整代码：

风险值数据=[{
重点:1,，
价值观：[{
金额：33，
数量：22，
时间：“2015-01-01”
}]
}, {
重点:二,，
价值观：[{
金额：52，
数量：20，
时间：2015-02-01
}]
}, {
重点:三,，
价值观：[{
金额：63，
数量：30，
时间：2015-03-01
}]
}, {
重点:四,，
价值观：[{
金额：92，
数量：60，
时间：2015-04-01
}]
}, {
重点:五,，
价值观：[{
金额：50，
数量：29，
时间：2015-05-01
}]
}, {
重点:6,，
价值观：[{
金额：53，
数量：25，
时间：2015-06-01
}]
}, {
关键：7，
价值观：[{
金额：46，
数量：12，
时间：2015-07-01
}]
}, {
关键词：8，
价值观：[{
金额：52，
数量：15，
时间：2015-08-01
}]
}, {
关键词：9，
价值观：[{
金额：55，
数量：20，
时间：2015-09-01
}]
}]
var保证金={
前20名，
右:30,，
底数：40，
左：50
},
宽度=300-边距.左-边距.右，
高度=150-margin.top-margin.bottom；
var tP=d3.time.format（“%Y-%m-%d”）；
var x=d3.time.scale（）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.orient（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（左）；
var color=d3.scale.category10（）；
var line=d3.svg.line（）
.x（功能（d）{
console.log（'d is:'，d.Period，'x（新日期（d.Period））是'，x（d.Period））；
返回x（d.Period）；
})
.y（功能（d）{
log（'y:d是'，y（d.Value））；
返回y（d值）；
})
var svg=d3。选择（“管道图渲染”）
.attr（'width'，width+margin.left+margin.right）
.attr（'height'，height+margin.top+margin.bottom）
.append（'g'）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
//这将数据分隔为我们想要的行，尽管数据是存储的
//在同一原始对象中。
var keys=color.domain（d3.keys（数据[0]。值[0]）。过滤器（函数（键）{
如果（键=='Amount'| |键=='Quantity'）{
返回键
}
}));
//这会将数据返回到两个可以绘制图形的独立对象中。
//在这种情况下，请输入数量和数量。
var datasets=color.domain（）.map（函数（名称）{
返回{
姓名:姓名,，
值：data.map（函数（d）{
返回{
句点：tP.parse（d.values[0].Time），
值：+d.values[0][name]
};
})
};
});
//将minydomavalue设置为零，而不是让它成为一个挥之不去的幻数。
var minDomainValue=0；
var minDate=d3.min（数据集、函数（d0）{
返回d3.min（d0.min）值，函数（d1）{
返回d1.期间；
})
}),
maxDate=d3.max（数据集、函数（d0）{
返回d3.max（d0.max）值，函数（d1）{
返回d1.期间；
})
});
x、 域（[minDate，maxDate]）；
y、 领域([
minDomainValue，
//d3.min（数据集，函数（c）{返回d3.min（c.values，函数（v）{返回v.Time；}）；}），
d3.max（数据集、函数（c）{
返回d3.最大值（c.值，函数（v）{
返回v.值；
});
})
])
//附加x轴类并四处移动轴。
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
//附加y轴类。
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
var dataset=svg.selectAll（“.pipeline”）
.数据（数据集）；
console.log（数据集）；
dataset.enter（）
.append（'g'）
.attr（“类”、“管道”）；
dataset.append（'path'）
.attr（'类'，'行'）
.attr（'d'，函数（d）{
返回线（d值）；
})
.attr（“数据图例”，函数（d）{
返回d.name
})
.样式（“笔划”，功能（d）{
返回颜色（d.name）；
})
dataset.exit（）.remove（）

非常好用，谢谢！我想知道这是不是我的域名。日期上的观点很好——这更像是一种蛮力的功能方式。

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