d3-ng2-service error「プロパティforce（）タイプのリンクがありません」

Question

Angularjs 2とd3-ng2-serviceの使用を開始したばかりで、ネットワークチャートを作成しようとしています。

Iは、例えば

https://bl.ocks.org/mbostock/2675ff61ea5e063ede2b5d63c08020c7

及びD3-NG2サービスへの移行を使用します。

I "）は、プロパティのリンク（タイプ力の存在しない"

は、次のエラーを取得しています

import { Component, ElementRef, NgZone, OnDestroy, OnInit } from  '@angular/core'; 

import { links, nodes} from './networkData.component'; 

import { 
    D3Service, 
    D3, 
    Axis, 
    ScaleLinear, 
    ScaleOrdinal, 
    Selection, 
    Simulation, 
    Transition 
} from 'd3-ng2-service'; 


@Component({ 
    selector: 'network1', 
    template: '<svg width="100%" height="100%"></svg>', 
    styleUrls: ['./network.component.css'] 
}) 
export class Network1Component implements OnInit, OnDestroy { 
    private d3: D3; 
    private parentNativeElement: any; 
    private d3Svg: Selection<SVGSVGElement, any, null, undefined>; 


    constructor(element: ElementRef, private ngZone: NgZone, d3Service: D3Service) { 
    this.d3 = d3Service.getD3(); 
    this.parentNativeElement = element.nativeElement; 
    } 

    ngOnDestroy() { 
    if (this.d3Svg.empty && !this.d3Svg.empty()) { 
     this.d3Svg.selectAll('*').remove(); 
    } 
    } 

    ngOnInit() { 
     let self = this; 
    let d3 = this.d3; 
    let width: number; 
    let height: number; 
    let d3ParentElement: Selection<HTMLElement, any, null, undefined>; 
    let d3Svg: Selection<SVGSVGElement, any, null, undefined>; 




    if (this.parentNativeElement !== null) { 

     d3ParentElement = d3.select(this.parentNativeElement); 
     d3Svg = this.d3Svg = d3ParentElement.select<SVGSVGElement>('svg'); 

     width = +d3Svg.attr('width'); 
     height = +d3Svg.attr('height'); 

     var color = d3.scaleOrdinal(d3.schemeCategory20); 

     var simulation = d3.forceSimulation() 
     .force("link", d3.forceLink().id(function(d) { return d[0].id; })) 
     .force("charge", d3.forceManyBody()) 
     .force("center", d3.forceCenter(width/2, height/2)); 

     var link = d3Svg.append<SVGGElement>('g') 
     .attr("class", "links") 
     .selectAll("line") 
     .data(links) 
     .enter().append("line") 
     .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); 

     var node = d3Svg.append<SVGGElement>('g') 
     .attr("class", "nodes") 
     .selectAll("circle") 
     .data(nodes) 
     .enter().append("circle") 
     .attr("r", 5) 
     .attr("fill", function(d) { return color(d.id); }); 


     node.append("title") 
     .text(function(d) { return d.id; }); 

     simulation 
     .nodes(nodes) 
     .on("tick", ticked); 

     simulation.force("link") 
     .links(links); 


    } 

    function ticked() { 
     link 
     .attr("x1", function(d) { return d.source; }) 
     .attr("y1", function(d) { return d.source; }) 
     .attr("x2", function(d) { return d.target; }) 
     .attr("y2", function(d) { return d.target; }); 

     node 
     .attr("cx", function(d) { return d.id; }) 
     .attr("cy", function(d) { return d.id; }); 
    } 

    function dragstarted(d) { 
     if (!d3.event.active) simulation.alphaTarget(0.3).restart(); 
     d.fx = d.x; 
     d.fy = d.y; 
    } 

    function dragged(d) { 
     d.fx = d3.event.x; 
     d.fy = d3.event.y; 
    } 

    function dragended(d) { 
     if (!d3.event.active) simulation.alphaTarget(0); 
     d.fx = null; 
     d.fy = null; 
    } 

    } 

} 

の下にリストされている次のコード

simulation.force("link") 
    .links(links); 

完全なコード付き

Answer 1

bl.ockをTypeScriptに移植するには、いくつかの調整が必要ですノードとリンクのデータ型とさまざまな力の種類が正しく処理されるようにします。

forceSimulationは、呼び出すときに2つのジェネリックを受け入れます。あなたのノードがタイプYourNodeTypeでSimulationNodeDatumになり、リンクがタイプYourLinkTypeでSimulationLinkDatum<YourNodeType>になると仮定しましょう。 SimulationNodeDatumおよびSimulationLinkDatumは、d3-force定義で定義されたインターフェイスです。

（d3-force definition参照）。

これで、let simulation = d3.forceSimulation<YourNodeType, YourLinkType>()を定義する必要があります。この場合、ノードとケースでは、重要なことに、シミュレーションを通してリンクタイプが強制されます。

最小のForceインターフェイス以外のプロパティを持つフォースを取得するには、発生したエラーのコアに、事前に既知のタイプに強制する必要があります。あなたの場合、リンクフォースは定義にあらかじめ定義されたインターフェースを持っています。

したがってsimulation.force<ForceLink<YourNodeType, YourLinkType>>('link')は、定義されたlinks()メソッドでリンク先を返します。あなたはD3-NG2-サービスを使用しているので、

ハウスキーピングコメントのカップル、インターフェースSimulationNodeDatum、SimulationLinkDatumとForceLinkはあなたの角度成分を含むファイルにd3-ng2-serviceから直接インポートすることができます。

あなたがstrictNullChecksを使用している場合は、!が返さ力が一般的でundefinedかもしれないケースを扱うsimulation.force<ForceLink<YourNodeType, YourLinkType>>('link')!.links()、したいことがあります。明らかにあなたの場合ではありません。

これが役に立ちます。

Answer 2

トムの答えが正しい方向に私を指摘し、私はこの仕事を得ることができた - 感謝トム。このによる作業誰のために、私の場合には、私もそうsimulation.force()に.links(links)を追加する必要がありました：

simulation.force("link").links(links); 

は次のようになります。

simulation.force<ForceLink<any, any>>('link').links(links); 

私はコメントとしてこれを追加し、私の担当者のISN」と思います十分に高い。