angular – d3-ng2-service error“属性链接不存在类型force()”

我用例子

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

并将其转换为d3-ng2-service.

我收到以下错误

“属性链接不存在类型force()”

使用以下代码

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

完整代码如下

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,undefined>;
    let d3Svg: Selection<SVGSVGElement,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;
    }

  }

}