d3.js: d3.min.js: 1 Lỗi: <path> thuộc tính d: Số dự kiến, "MNaN, NaNLNaN, NaN"

Question

Tôi đã nhập tệp csv và cố gắng ánh xạ thông tin trên d3. Tôi đoán tôi đã thu nhỏ mọi thứ đúng cách. Bất cứ ai có thể giúp tôi ra và hướng dẫn tôi thông qua điều này?

tôi nhận được lỗi sau:

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

Các dữ liệu trong file csv là như thế này:

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

Đây là mã.

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

Theo documentation tất cả các giá trị thu được từ phân tích các CSV sẽ được chuỗi:

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

Bạn sẽ phải chỉ định một chức năng accessor mà sẽ chăm sóc của việc chuyển đổi

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

Là một tác dụng phụ này cũng sẽ đơn giản hóa mã của bạn bởi vì nó giải phóng bạn khỏi phải làm một chuyển đổi mỗi khi bạn truy cập giá trị. Đây là mã đầy đủ:

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

có nên trước

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

Như thế này

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