D3, TS und Angular 2

Question

Ich versuche, D3 v4 mit Angular 2 (Typescript) zu verwenden. Ich schaue gerade in D3 v4. Ich konnte einige der Antworten hier im Stackoverflow mit ähnlichen Problemen ohne Erfolg folgen. Ich habe die meisten D3-Bibliotheken und ihre Typisierungen importiert (ich verwende TS 2.0) und in meiner Komponentendatei benötige ich import * as d3 from 'd3';. Dieses Problem für mich könnte Angular 2, Typescript und 3rd-Party-Bibliotheken sein ... bis jetzt ein Durcheinander.

In meiner Komponentendatei habe ich einige Code wie folgt aus:

 let arc = d3.arc() 
      .outerRadius(chartHeight/2) 
      .innerRadius(chartHeight/4) 
      .padAngle(0.03) 
      .cornerRadius(8); 

     let pieG = chartLayer.selectAll("g") 
      .data([data]) 
      .enter() 
      .append("g") 
      .attr("transform", "translate(" + [chartWidth/2, chartHeight/2] + ")"); 

     let block = pieG.selectAll(".arc") 
      .data(arcs); 

     let newBlock = block.enter().append("g").classed("arc", true); 

     newBlock.append("path") 
      .attr("d", arc) 
      .attr("id", function (d, i) { 
       return "arc-" + i 
      }) 
      .attr("stroke", "gray") 
      .attr("fill", function (d, i) { 
       return d3.interpolateCool(Math.random()) 
      }); 

Wie Sie sehen, habe ich in der ersten Zeile definierten Bogen und dessen Verwendung in Zeile 19, aber ich erhalte eine Fehlermeldung:

[at-loader] src\piechart\piechart.component.ts:19:28 
    Argument of type 'Arc<any, DefaultArcObject>' is not assignable to  parameter of type '(this: BaseType, datum: PieArcDatum<number | { valueOf(): number; }>, index: num 
    ber, groups: Base...'. 
    Types of parameters 'd' and 'datum' are incompatible. 
    Type 'PieArcDatum<number | { valueOf(): number; }>' is not assignable to type 'DefaultArcObject'. 
     Property 'innerRadius' is missing in type 'PieArcDatum<number | { valueOf(): number; }>'. 

Der Bogen und der Bogen scheinen in den d3-Form-Typen und auch in den d3-Pfad-Typen definiert zu sein.

Jeder, der mir helfen kann ... Ich habe Tage damit verbracht, ein POC mit eckigen 2, TS und D3 v4 zu machen und bis jetzt kein Glück ... Ich habe alle Artikel online darüber und die meisten von ihnen gesehen ältere Version haben oder nicht funktionieren. Es scheint mir auch, dass dies ein Tippproblem ist. Angular 2 und Third Party Libraries sind ein Albtraum.

Answer 1

die Sie interessieren, wenn Sie den Pfad anhängt:

newBlock.append("path") 
    .attr("d", arc()) 
    .attr("id", function (d, i) { 
     return "arc-" + i 
    }) 
    .attr("stroke", "gray") 
    .attr("fill", function (d, i) { 
     return d3.interpolateCool(Math.random()) 
    }); 

Nach dem d3 API, nachdem eine Bogengenerator mit let arc = d3.arc() konstruieren, müssen Sie arc() aufrufen, um den tatsächlichen Lichtbogen zu erzeugen.

Answer 2

Der folgende Code zeichnet einen Bogen. Sie können weitere Elemente in arcData liefern:

import * as d3 from "d3"; 

export function run() { 
    const chartLayer = d3.select('svg'); 

    let chartHeight = 500; 
    let chartWidth = 500; 
    let data = null; 

    let arcData = [{ 
      innerRadius: 0, 
      outerRadius: 100, 
      startAngle: 0, 
      endAngle: Math.PI/2, 
      padAngle: 1 
     }]; 

    let arc = d3.arc(); 

    let pieG = chartLayer 
     .selectAll("g").data([data]).enter() 
     .append("g") 
     .attr("transform", "translate(" + [chartWidth/2, chartHeight/2] + ")"); 

    let block = pieG.selectAll(".arc") 
     .data(arcData); 

    let newBlock = block.enter().append("g").classed("arc", true); 

    newBlock.append("path") 
     .attr("d", function (d) { return arc(d) }) 
     .attr("id", function (d, i) { 
      return "arc-" + i 
     }) 
     .attr("stroke", "gray") 
     .attr("fill", function (d, i) { 
      return d3.interpolateCool(Math.random()) 
     }); 
} 

Btw, meine Vermutung ist, dass Sie nicht die Linie brauchen

.selectAll("g").data([data]).enter() 

Answer 3

ich die Import-Anweisung in meinem Angular 2 Projekt hinzugefügt und wurde immer Fehler in Entwicklung. Ich benutze angular-cli und d3 v4.

Neben import * as d3 from "d3"; den Code unten an deine typings.d.ts Datei hinzufügen:

declare module 'd3' { 
    export * from 'd3-array'; 
    export * from 'd3-axis'; 
    export * from 'd3-brush'; 
    export * from 'd3-chord'; 
    export * from 'd3-collection'; 
    export * from 'd3-color'; 
    export * from 'd3-dispatch'; 
    export * from 'd3-drag'; 
    export * from 'd3-dsv'; 
    export * from 'd3-ease'; 
    export * from 'd3-force'; 
    export * from 'd3-format'; 
    export * from 'd3-geo'; 
    export * from 'd3-hierarchy'; 
    export * from 'd3-interpolate'; 
    export * from 'd3-path'; 
    export * from 'd3-polygon'; 
    export * from 'd3-quadtree'; 
    export * from 'd3-queue'; 
    export * from 'd3-random'; 
    export * from 'd3-request'; 
    export * from 'd3-scale'; 
    export * from 'd3-selection'; 
    export * from 'd3-shape'; 
    export * from 'd3-time'; 
    export * from 'd3-time-format'; 
    export * from 'd3-timer'; 
    export * from 'd3-transition'; 
    export * from 'd3-voronoi'; 
    export * from 'd3-zoom'; 
} 

Alle Fehler, ich war immer (und sie nur in der Entwicklung zu sehen) ging weg, als ich diesen Code enthalten. Hoffe, das hilft Ihnen Tippfehler auszuschließen und bringt Sie näher an eine Lösung!

Answer 4

brauchen nur arc als any zu werfen. So sollte es sein .attr("d", <any>arc)