D3 <path> hat NAN Werte in seinen Koordinaten

Question

Ich versuche, diesem Beispiel zu folgen: Line Chart: bl.ocks.org, aber ich erhalte eine Fehlermeldung wie: (veraltet)

d3.min.js:1 Error: Invalid value for attribute d="MNaN,450LNaN,425.96810933940776LNaN,386.2186788154896LNaN,373.917995444>1913LNaN,375.28473804100224LNaN,379.0432801822323LNaN,368.5649202733485LNa>N,368.4510250569475LNaN...

ich schon eine Menge falsch gelöst haben Teile von diesem Beispiel, aber ich kann diesen nicht knacken. Ich habe über Zeitobjekte gelesen und sie als Strings formatiert, die ähnliche Probleme verursachen, aber egal, wie ich d.date formatiere, meine Ausgabe enthält immer NANs.

JSON:

var lineData = [ 
{"date":"24-Apr-07","close":93.24}, 
{"date":"25-Apr-07","close":95.35}, 
{"date":"26-Apr-07","close":98.84}... 

JS:

var parseTime = d3.time.format("%d-%b-%y").parse; 
... 

svg.append("path") 
     .datum(data) 
     .attr("class", "line") 
     .attr("d", line); 

function type(d) { 
    d.date = parseTime(d.date); 
    d.close = +d.close; 
    return d; 
} 

Voll Code auf Codepen: http://codepen.io/SammyJ/pen/qZoEdO

Answer 1

Sie vermissen die type Funktion hier.

Sie müssen die Art Funktion, um Ihre Rohdaten anzuwenden:

var data = lineData.map(type); 

Dies wurde in der Ladestufe in der Probe durchgeführt, die Sie herausnahm:

d3.tsv("data.tsv", type, function(error, data) { 
    if (error) throw error; 

Dokumentation: https://github.com/mbostock/d3/wiki/CSV

Note that the values themselves are always strings; they will not be automatically converted to numbers. JavaScript may coerce strings to numbers for you automatically (for example, using the + operator). By specifying an accessor function, you can convert the strings to numbers or other specific types, such as dates:

Auch Ihre Domain nimmt in neue Daten so braucht es nicht, die Daten erneut zu verarbeiten, damit diese beiden Linien

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

Notwendigkeit geändert werden:

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

das aktualisierte Beispiel Siehe: http://codepen.io/anon/pen/aNjgEw