d3.js：d3.min.js:1 错误：<path> 属性 d：预期数字，“MNaN，NaNLNaN，NaN”

Posted 2023-02-22

【中文标题】d3.js：d3.min.js:1 错误：<path> 属性 d：预期数字，“MNaN，NaNLNaN，NaN”

【英文标题】：d3.js : d3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN"

【发布时间】：2016-09-12 03:42:55

【问题描述】：

我导入了一个 csv 文件并尝试在 d3 上映射信息。我想我已经正确缩放了所有内容。任何人都可以帮助我并指导我完成这件事吗？

我收到以下错误：

d3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…".

csv文件中的数据是这样的：

------------------------------------------
|       00:00:01      | 1                |
------------------------------------------
|       00:05:01      | 2                |
------------------------------------------
|       00:10:01      | 3                |
------------------------------------------
|       00:15:01      | 5                |
------------------------------------------

这是代码。

var Chart = (function(window,d3) 

  var svg, data, x, y, xAxis, yAxis, dim, chartWrapper, line, path, margin = , width, height;

  d3.csv('Book1.csv', init); //load data, then initialize chart

  //called once the data is loaded
  function init(csv) 
    data = csv;

    //initialize scales
    xExtent = d3.extent(data, function(d,i)  return new Date(d.date) );
    yExtent = d3.extent(data, function(d,i)  return d.value );
    x = d3.time.scale().domain(xExtent);
    y = d3.scale.linear().domain(yExtent);

    //initialize axis
    xAxis = d3.svg.axis().orient('bottom');
    yAxis = d3.svg.axis().orient('left');

    //the path generator for the line chart
    line = d3.svg.line()
      .x(function(d)  return x(new Date(d.date)) )
      .y(function(d)  return y(d.value) );

    //initialize svg
    svg = d3.select('#chart').append('svg');
    chartWrapper = svg.append('g');
    path = chartWrapper.append('path').datum(data).classed('line', true);
    chartWrapper.append('g').classed('x axis', true);
    chartWrapper.append('g').classed('y axis', true);

    //render the chart
    render();
  

  function render() 

    //get dimensions based on window size
    updateDimensions(window.innerWidth);

    //update x and y scales to new dimensions
    x.range([0, width]);
    y.range([height, 0]);

    //update svg elements to new dimensions
    svg
      .attr('width', width + margin.right + margin.left)
      .attr('height', height + margin.top + margin.bottom);
    chartWrapper.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    //update the axis and line
    xAxis.scale(x);
    yAxis.scale(y);

    svg.select('.x.axis')
      .attr('transform', 'translate(0,' + height + ')')
      .call(xAxis);

    svg.select('.y.axis')
      .call(yAxis);

    path.attr('d', line);
  

  function updateDimensions(winWidth) 
    margin.top = 20;
    margin.right = 50;
    margin.left = 50;
    margin.bottom = 50;

    width = winWidth - margin.left - margin.right;
    height = 500 - margin.top - margin.bottom;
  

  return 
    render : render
  

)(window,d3);

【问题讨论】：

所以这部分 line = d3.svg.line() .x(function(d) return x(new Date(d.date)) ) .y(function(d) return y(d.value) ); 似乎没有返回 d3 可以使用的数字。

您的 CSV 不是逗号分隔的？

【参考方案1】：

根据documentation，解析 CSV 产生的所有值都是字符串：

请注意，值本身始终是字符串；它们不会自动转换为数字。

您必须指定一个负责转换的访问器函数

d3.csv('Book1.csv', convert, init); //load data, convert, then initialize chart

function convert(d) 
  return 
    date: new Date(d.date),
    value: +d.value         // convert string to number
  ;
 

作为一个副作用，这也将简化您的代码，因为它使您不必在每次访问值时进行转换。完整代码如下：

var Chart = (function(window, d3) 

  var svg, data, x, y, xAxis, yAxis, dim, chartWrapper, line, path, margin = ,
    width, height;

  d3.csv('Book1.csv', convert, init); //load data, convert, then initialize chart

  function convert(d) 
    return 
      date: new Date(d.date),
      value: +d.value         // convert string to number
    ;
   

  //called once the data is loaded
  function init(csv) 
    data = csv;

    //initialize scales
    xExtent = d3.extent(data, function(d, i) 
      return d.date;
    );
    yExtent = d3.extent(data, function(d, i) 
      return d.value;
    );
    x = d3.time.scale().domain(xExtent);
    y = d3.scale.linear().domain(yExtent);

    //initialize axis
    xAxis = d3.svg.axis().orient('bottom');
    yAxis = d3.svg.axis().orient('left');

    //the path generator for the line chart
    line = d3.svg.line()
      .x(function(d) 
        return x(d.date)
      )
      .y(function(d) 
        return y(d.value)
      );

    //initialize svg
    svg = d3.select('#chart').append('svg');
    chartWrapper = svg.append('g');
    path = chartWrapper.append('path').datum(data).classed('line', true);
    chartWrapper.append('g').classed('x axis', true);
    chartWrapper.append('g').classed('y axis', true);

    //render the chart
    render();
  

  function render() 

    //get dimensions based on window size
    updateDimensions(window.innerWidth);

    //update x and y scales to new dimensions
    x.range([0, width]);
    y.range([height, 0]);

    //update svg elements to new dimensions
    svg
      .attr('width', width + margin.right + margin.left)
      .attr('height', height + margin.top + margin.bottom);
    chartWrapper.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    //update the axis and line
    xAxis.scale(x);
    yAxis.scale(y);

    svg.select('.x.axis')
      .attr('transform', 'translate(0,' + height + ')')
      .call(xAxis);

    svg.select('.y.axis')
      .call(yAxis);

    path.attr('d', line);
  

  function updateDimensions(winWidth) 
    margin.top = 20;
    margin.right = 50;
    margin.left = 50;
    margin.bottom = 50;

    width = winWidth - margin.left - margin.right;
    height = 500 - margin.top - margin.bottom;
  

  return 
    render: render
  
)(window, d3);

【参考方案2】：

x.range([0, width]);
y.range([height, 0]);

应该在

line = d3.svg.line()
    .x(function(d)  return x(new Date(d.date)) )
    .y(function(d)  return y(d.value) );

像这样

  x = d3.time.scale().domain(xExtent).range([0, width]);
  y = d3.scale.linear().domain(yExtent).range([height, 0]);
line = d3.svg.line()
    .x(function(d)  return x(new Date(d.date)) )
    .y(function(d)  return y(d.value) );