d3.js：d3.min.js：1错误：属性d：预期编号，“MNaN，NaNLNaN，NaN”

Question

我导入了一个csv文件并试图映射d3上的信息。我想我已经适当地扩大了一切。任何人都可以帮我解决这个问题吗？d3.js：d3.min.js：1错误：<path>属性d：预期编号，“MNaN，NaNLNaN，NaN”

我得到以下错误：

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

Answer 1

按照documentation从解析CSV将字符串产生的所有值：

Note that the values themselves are always strings; they will not be automatically converted to numbers.

您必须指定一个访问函数，该函数转换

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

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