d3-Formfehler, wenn die Leitung in Angular 2

Question

Schaffung Ich versuche, die D3 v4 Liniendiagramm, wie pro Mike Bostock's article auf sie zu implementieren, aber tue dies in Angular 2.

Ich habe D3 v4 installiert und die erforderliche Typisierungen. Auszug aus meinem package.json:

"@types/d3": "^4.9.0", 
"@types/d3-array": "^1.2.0", 
"@types/d3-axis": "^1.0.8", 
"@types/d3-scale": "^1.0.6", 
"@types/d3-shape": "^1.2.0", 
"@types/d3-time-format": "^2.0.5", 
... 
"d3": "4.9.0", 
"d3-array": "^1.2.0", 
"d3-axis": "^1.0.8", 
"d3-scale": "^1.0.6", 
"d3-shape": "^1.2.0", 
"d3-time-format": "^2.0.5", 

Allerdings habe ich einen Fehler erhalte beim Versuch, die line Variable zu erstellen, wie es ein [number, number] aber nach der Führung erwarten muß ich es ein Element von Daten hier passieren, damit es Kann das Datum und den Wert abholen. Mein Code ist:

var line = d3Shape.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.value); }); 

Die beiden Fehler erzeugt dies sind:

Property 'date' does not exist on type '[number, number]'. 
Property 'value' does not exist on type '[number, number]'. 

Hat jemand diesen Fehler aufgetreten ist, und wissen, wie zu lösen?

Answer 1

Ich habe dies schon einmal erlebt und es war eine Menge Verwirrung wegen der Typisierung. Ich benutzte eckige 4.x und war mit demselben Problem fest. Die Lösung war einfach zu Typoskript über die Art zu machen wissen und Generika kam hier zu retten:

zuerst die Art der Daten für die d3 Linie erklären:

export type LineData = { date: any, value: any }; 

dann verwenden, wie unten die generische Methode verwendet:

var line = d3Shape.line<LineData>() 
    .x(function(d) { return this.x(d.date); }) 
    .y(function(d) { return this.y(d.value); }); 

Hoffe, dass hilft!