2017-06-30 6 views
0

Ich habe den Code von hier https://gist.github.com/d3noob/013054e8d7807dff76247b81b0e29030 arbeiten in Vanille Javascript, aber ich kämpfe um ein Sankey-Diagramm in meinem Angular 2-Projekt (mit Angular CLI) arbeiten, die Typoskript verwendet.D3 Sankey-Diagramm mit Typoskript

D3 arbeitet in dem Projekt in Ordnung, aber auch mit dem der Sankey-Plugin und Typisierungen von NPM installiert:

Plugin: https://www.npmjs.com/package/d3-sankey

Typisierungen: https://www.npmjs.com/package/@types/d3-sankey

bekomme ich Fehler auf:

const sankey = d3.sankey() 
.nodeWidth(20) 
.nodePadding(40) 
.size([width, height]) 

const path = sankey.link() 

und

sankey 
    .nodes(graph.nodes) 
    .links(graph.links) 
    .layout(32) 

als weder .link() nor .layout() sind Eigenschaften von sankey erkannt. Hat jemand ein Sankey-Diagramm, das mit Typescript und Angularjs 2+ funktioniert? Jede Hilfe wäre willkommen.

+0

ich nicht einmal 'd3.sankey finden()' nach den Typen der Installation, wie Sie das tun? –

+0

@John_J du musst das Plugin auch installieren –

+1

Danke @Michael ~ btw, ich hatte das Sankey-Diagramm in diesen Tagen funktioniert, bitte ref mein Gist: https://gist.github.com/MagicJohnJang/3cde82004e632e66b0fc5c156a7c16e9 .In Kürze: 1. Importieren Sie d3-sankey mit einem anderen Namen als 'd3' (das von D3.js verwendet wurde). 2. Definieren Sie die Eingabe ('nodes' und' links') mit bestimmten Typen (wie ich in meinem Geiste zeige). –

Antwort

3

Das d3-sankey-Plugin hat keine Link-Funktion definiert. Sie verwenden Code, der für ein älteres Plugin gedacht war, nicht für das, das in das d3 gitHub-Repository gerollt wurde (d3-sankey).

Versuchen Sie dieses Beispiel, anstatt Referenzierung - es die gleiche Version des Plugins ist, die Sie sind: https://bl.ocks.org/mbostock/ca9a0bb7ba204d12974bca90acc507c0

+0

Für jeden, der in Zukunft zu dieser Frage kommt, kann ich bestätigen, dass die Kombination von Lecia und John_J's Antworten funktioniert. Ich empfehle Ihnen, John_Js Kern in den Kommentaren zu meiner ursprünglichen Frage zu sehen. –