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

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

错误：属性转换：尾随垃圾，＆＃34;翻译（0，NaN）＆＃34;。

除此之外，我试图使用＆＃34; .showControls（false）＆＃34;在X轴上隐藏底部比例和最小 - 最大值。和＆＃34; .showMaxMin（false）＆＃34;。但那些没有用。

Answer 1

你忘了做y访问器。

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

nvd3日期数据折线图有问题

1 个答案: