d3js - Lỗi Loại: chuỗi là undefined

Question

Tôi không hiểu lỗi này:

TypeError: string is undefined function d3_time_parse(date, template, string, j) { var c, p, i = 0, n = template.length, m = string.length; ...

Ở đây mã của tôi:

 


    var margin = {top: 20, right: 80, bottom: 30, left: 50}, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

    var parseDate = d3.time.format("%Y%m%d").parse; 

    var x = d3.time.scale() 
     .range([0, width]); 

    var y = d3.scale.linear() 
     .range([height, 0]); 

    var color = d3.scale.category10(); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

    var line = d3.svg.line() 
     .interpolate("basis") 
     .x(function(d) { return x(d.date); }) 
     .y(function(d) { return y(d.index); }); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    d3.csv("data.csv", function(error, data) { 
     color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; })); 

     data.forEach(function(d) { 
     d.date = parseDate(d.date); 
     }); 

     var indexes = color.domain().map(function(name) { 
     return { 
      name: name, 
      values: data.map(function(d) { 
      return {date: d.date, index: +d[name]}; 
      }) 
     }; 
     }); 

     x.domain(d3.extent(data, function(d) { return d.date; })); 

     y.domain([ 
     d3.min(indexes, function(c) { return d3.min(c.values, function(v) { return v.index; }); }), 
     d3.max(indexes, function(c) { return d3.max(c.values, function(v) { return v.index; }); }) 
     ]); 

     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     svg.append("g") 
      .attr("class", "y axis") 
      .call(yAxis) 
     .append("text") 
      .attr("transform", "rotate(-90)") 
      .attr("y", 6) 
      .attr("dy", ".71em") 
      .style("text-anchor", "end") 
      .text("Variation (%)"); 

     var index = svg.selectAll(".index") 
      .data(indexes) 
     .enter().append("g") 
      .attr("class", "index"); 

     index.append("path") 
      .attr("class", "line") 
      .attr("d", function(d) { return line(d.values); }) 
      .style("stroke", function(d) { return color(d.name); }); 

     index.append("text") 
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) 
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.index) + ")"; }) 
      .attr("x", 3) 
      .attr("dy", ".35em") 
      .text(function(d) { return d.name; }); 
    }); 

và tập tin csv của tôi trông như thế này:

 
Date,DAX,CAC40,FTSE,NASDAQ,Other 
20060407,-0.000712859,-0.009013212,0.010819606,0.009846526,0.003082604 
20060413,-0.007765968,-0.024263398,0.011238971,0.004128621,0.005952774 
20060421,0.02261859,0.00330204,0.028734861,0.001688981,0.003459211 
20060428,0.007170521,-0.007531405,0.010534438,-0.002416181,0.004
... 

Ai đó có thể giúp tôi không? thx skeut

Answer 1

Date,DAX,CAC40,FTSE,NASDAQ,Other

Javascript tên biến là trường hợp nhạy cảm, vì vậy khi phân tích tập tin với tiêu đề CSV như trên bạn cần phải tham khảo các lĩnh vực với:

d.Date // note the uppercase D 
d.DAX // note all uppercase 

Dưới đây là một ví dụ từ d3 wiki https://github.com/mbostock/d3/wiki/CSV#wiki-parse

Year,Make,Model,Length

1997,Ford,E350,2.34

2000,Mercury,Cougar,2.38

Khi được phân tích bằng trình phân tích cú pháp CSV của d3, dữ liệu kết quả sẽ được biểu diễn bằng mảng sau:

[ 
    {"Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34"}, 
    {"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"} 
] 

Lưu ý các phím đối tượng chữ hoa. Để truy cập năm của mục nhập đầu tiên, một "Năm" có chữ hoa Y trong data[0].Year là cần thiết.

Như vậy trong chức năng forEach của bạn, bạn sẽ cần:

data.forEach(function (d) { 
    d.Date = parseDate(d.Date); 
}); 

... và sau này:

return {date: d.Date, index: +d[name]};