d3.js: d3.min.js: 1 Errore: <path> attributo d: Numero previsto, "MNaN, NaNLNaN, NaN"

Question

Ho importato un file csv e ho provato a mappare le informazioni su d3. Immagino di aver ridimensionato tutto correttamente. Qualcuno può aiutarmi e guidarmi attraverso questo?

ottengo il seguente errore:

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

I dati nel file CSV è simile a questo:

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

Ecco il codice.

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

Secondo il documentation tutti i valori risultanti dalla analisi del CSV sarà stringhe:

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

Si dovrà specificare una funzione di accesso che si occupa della conversione

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

Come effetto collaterale questo sarà anche semplificare il codice, perché ti libera dal dover fare una conversione ogni volta che si accede i valori. Ecco il codice completo:

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

Qualora prima

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

Ti piace questa

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