1. Zuhause
  2. Frage und Antwort
  3. D3 Liniendiagramm, erwartete Zahl zeigt die Anzahl und NaN

D3 Liniendiagramm, erwartete Zahl zeigt die Anzahl und NaN

2017-10-30 4 views
3

Ich habe einen Plunker hier - https://plnkr.co/edit/NNjlIr?p=previewD3 Liniendiagramm, erwartete Zahl zeigt die Anzahl und NaN

Ich versuche, eine einfache Liniendiagramm mit kantigem und D3 zu schaffen.

In meinem Beispiel zeigen die Konsole die Daten aber Graph, der die Linie

zeigen dosen't ich einen Fehler in der Konsole.

Error: attribute d: Expected number, "MNaN,3LNaN,8LNaN,…".

Die NaN scheint mit NaN

die richtige Zahl zu zeigen, Kann mir jemand sagen, was ich falsch mache?

private drawLine() { 

    console.log(this.data); 

    this.valueline = d3.line() 
     .x((d) => { return d['date']; }) 
     .y((d) => { return d['total'] }); 

    this.g.append('path') 
     .datum(this.data) 
     .attr("class", "path") 
     .attr("fill", "none") 
     .attr("stroke", "red") 
     .attr("stroke-width", 1.5) 
     .attr("d", this.valueline(this.data)); 

}

Quelle

2017-10-30 ttmt

Antwort

4

Sie haben Ihre Waage zu verwenden (this.x und this.y):

this.valueline = d3.line() 
    .x((d) => { return this.x(d['date']); }) 
    .y((d) => { return this.y(d['total']) });

Ohne die Waage Sie "d" Attribut Dinge wie "2012-03-20" auf die SVG Pfad des sind vorbei, die wenig Sinn macht. Hier

ist die aktualisierte Plunker: https://plnkr.co/edit/S9UejrvcgVE9yhIHUbkE?p=preview

Quelle

2017-10-30 13:27:14

+0

Vielen Dank, funktioniert perfekt. Kann ich wirklich frech sein und fragen, wie ich die Linie von links nach rechts animieren könnte, – ttmt

+1

Ja, können Sie fragen. Das ist jedoch keine einfache Aufgabe. Es gibt viele Beispiele online, wie dieses: http://bl.ocks.org/duopixel/4063326, und einige Antworten hier auf S.O., wie folgt: https://stackoverflow.com/q/13893127/5768908 –

Verwandte Themen

 Verwandte Themen