Angular 4アプリケーションにd3グラフを含める

Question

私はと表示されているd3のMike Bostonビルドから強制的なネットワークグラフを表示したいと思うtypescriptでAngularアプリケーションを構築しています。

私がコピーされ、問題なくスクリプトを入力するためのコードの大部分を翻訳しますがライン

. force("link", d3.forceLink().id(function(d) { return d.id; })) 

はエラー{} has no property idで失敗してきました。

d.source.xを参照する次の行のみが正常に動作しますか？

idings.d.tsにidを定義するインターフェイスがあるにもかかわらず、d3をnpmでインストールしましたが、/ d3も入力できますが運がまだありません。

ありがとうございました！

ノードv8を使用します。 1.3およびNPM 5

EDIT ここで、今ではコンパイルが、結果は非常に適切ではないため、私のコードです：

import { Component, OnInit } from '@angular/core'; 
import * as d3 from 'd3'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <h1> 
     Welcome to {{title}}!! 
    </h1> 
    <svg width="900" height="500"></svg> 
    `, 
    styles: ['.links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; }'] 
}) 

export class AppComponent implements OnInit { 
    title = 'app'; 

    private margin = {top: 0, right: 0, bottom: 0, left: 0}; 
    private width:number; 
    private height:number; 
    private svg:any; 
    private color:any; 
    private simulation:any; 

    constructor() { 
    this.width = 900 - this.margin.left - this.margin.right ; 
    this.height = 500 - this.margin.top - this.margin.bottom; 
    } 

    ngOnInit() { 
    this.initSvg(); 
    this.createGraph(); 
    } 

    private initSvg() { 
    this.svg = d3.select("svg") 
       .append("g") 
       .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")"); 
    this.color = d3.scaleOrdinal(d3.schemeCategory20); 
    } 

    createGraph() { 
    this.simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id((d:any) => d.id)) 
    .force("charge", d3.forceManyBody()) 
    .force("center", d3.forceCenter(this.width/2, this.height/2)); 

    d3.json("../assets/miserables.json", (error:any, graph:any) => { 
     if (error) throw error; 

     let link = this.svg.append("g") 
        .attr("class", "links") 
        .selectAll("line") 
        .data(graph.links) 
        .enter().append("line") 
         .attr("stroke-width", (d:any) => Math.sqrt(d.value)); 

     let node = this.svg.append("g") 
        .attr("class", "nodes") 
        .selectAll("circle") 
        .data(graph.nodes) 
        .enter().append("circle") 
         .attr("r", 5) 
         .attr("fill", (d) => this.color(d.group)) 
         .call(d3.drag() 
          .on("start", dragstarted) 
          .on("drag", dragged) 
          .on("end", dragended)); 

     node.append("title") 
      .text((d) => d.id); 

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

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

     function ticked() { 
      link 
       .attr("x1", (d) => d.source.x) 
       .attr("y1", (d) => d.source.y) 
       .attr("x2", (d) => d.target.x) 
       .attr("y2", (d) => d.target.y); 

      node 
       .attr("cx", (d) => d.x) 
       .attr("cy", (d) => d.y); 
     } 
    }) 

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

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

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

Answer 1

http://plnkr.co/edit/qcESHb3cCwD6NZL1yuhX?p=previewで与えられた例は、ここに示したコードに焦点を当てて、私を助け：

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

this.render(miserables); 

これは私が見た中で最高の演出です。私のために働く。

Answer 2

あなたは活字体2.4を使用している場合、たぶんそれは、バージョン管理に関連するものです.1、2.3.4にダウングレードしてみてください。あなたがいずれかを使用することができます回避策として

：

const forceLink: any = d3.forceLink(); 
. force("link", forceLink.id(function(d) { return d.id; }))