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

我无法绘制本应使用样本数据生成的图表。我在浏览器的控制台中收到以下错误 window -

Error: attribute transform: Trailing garbage, "translate(0,NaN)".

除此之外，我还尝试使用“.showControls(false)”和“.showMaxMin(false)”隐藏 X 轴中的底部比例和最小值-最大值。但是这些都不起作用。

Answer 1

您忘记执行 y 访问器。

做这样的事情： chart.y(function (d) { return d.value; });

nvd3 日期数据折线图的问题

Trouble with nvd3 date-data line chart

d3.js

charts

line

nvd3.js