nvd3 日期数据折线图的问题

Question

我对D3和nvd3很陌生。我正在尝试绘制带有日期轴和数据轴的图表 - https://jsfiddle.net/sujit77/7ns2g4a1/6/。

var dataValue = [{'key':'Line', 'values':[{"key":"2016-04-04 0:0:0","value":1},{"key":"2016-04-05 0:0:0","value":1},{"key":"2016-04-07 0:0:0","value":1},{"key":"2016-04-08 0:0:0","value":1},{"key":"2016-04-11 0:0:0","value":1},{"key":"2016-04-13 0:0:0","value":1},{"key":"2016-04-14 0:0:0","value":0.5},{"key":"2016-04-19 0:0:0","value":1},{"key":"2016-04-20 0:0:0","value":1},{"key":"2016-04-22 0:0:0","value":1},{"key":"2016-04-25 0:0:0","value":1},{"key":"2016-04-26 0:0:0","value":1},{"key":"2016-04-27 0:0:0","value":1},{"key":"2016-04-28 0:0:0","value":1},{"key":"2016-04-29 0:0:0","value":1},{"key":"2016-05-03 0:0:0","value":1},{"key":"2016-05-04 0:0:0","value":0},{"key":"2016-05-06 0:0:0","value":1},{"key":"2016-05-09 0:0:0","value":1},{"key":"2016-05-10 0:0:0","value":1},{"key":"2016-05-11 0:0:0","value":1},{"key":"2016-05-12 0:0:0","value":1},{"key":"2016-05-13 0:0:0","value":1},{"key":"2016-05-16 0:0:0","value":1},{"key":"2016-05-17 0:0:0","value":1},{"key":"2016-05-19 0:0:0","value":1},{"key":"2016-05-24 0:0:0","value":0},{"key":"2016-05-25 0:0:0","value":0.5},{"key":"2016-05-26 0:0:0","value":1}]}];
nv.addGraph(function() {
  var chart = nv.models.lineWithFocusChart()
  //.showControls(false)
  //.showMaxMin(false);
  .x(function(d) {return d3.time.format("%Y-%m-%d %H:%M:%S").parse(d['key']);})
  var format = d3.time.format("%m %d %Y");
  chart.yAxis
    .tickFormat(d3.format(',.2f'));
  chart.xAxis
    .tickFormat(function(d) { return d3.time.format('%Y %b %d')(new Date(d)) });
  d3.select('#line-charts').append('svg')
    .attr('height', 250)
    .attr('width', 400)
    .datum(dataValue)
    .call(chart);
  nv.utils.windowResize(chart.update);
  return chart;
});

我无法绘制应该使用示例数据生成的图形。我在浏览器的控制台窗口中收到以下错误 -

错误：属性转换：尾随垃圾，"translate(0，NaN("。

与此同时，我试图使用".showControls(false("和".showMaxMin(false("隐藏X轴中的底部比例和最小-最大值。但这些都不起作用。

Answer 1

你忘了做 y 访问器。

执行以下操作： chart.y(function (d) { return d.value; });