d3js - लेखन त्रुटि: स्ट्रिंग अपरिभाषित है

Question

मैं यह त्रुटि समझ में नहीं आता:

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

यहाँ

मेरी कोड:

 
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
... 

:

 


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

और मेरे csv फ़ाइल इस तरह दिखना

क्या कोई मेरी मदद कर सकता है? THX skeut

Answer 1

Date,DAX,CAC40,FTSE,NASDAQ,Other

JavaScript चर के नाम केस संवेदी होते हैं, इसलिए जब पार्स करने सीएसवी हेडर के साथ फ़ाइल के ऊपर के रूप में आप के साथ क्षेत्रों का उल्लेख करने की जरूरत है:

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

यहाँ d3 विकी है एक उदाहरण है https://github.com/mbostock/d3/wiki/CSV#wiki-parse

Year,Make,Model,Length

1997,Ford,E350,2.34

2000,Mercury,Cougar,2.38

जब डी 3 के सीएसवी पार्सर के साथ पार्स किया गया, परिणामी डेटा निम्नलिखित सरणी द्वारा प्रदर्शित किया जाएगा:

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

अपरकेस ऑब्जेक्ट कुंजी नोट करें। पहली प्रविष्टि के वर्ष तक पहुंचने के लिए, data[0].Year में अपरकेस वाई वाला "वर्ष" आवश्यक होगा।

इस प्रकार अपने forEach समारोह में आप की आवश्यकता होगी:

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

... और बाद में:

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