d3.js強制圖形與腳本和angular2

Question

我想創建一個簡單的強制圖形（2個節點與關係）與角2和類型的腳本。並不能使其工作。

我會很感激這個工作演示。

這一點，我想出了」 idont代碼知道，如果它的正確與否

export class SysRelationsComponent implements OnInit { 

    private d3: D3; 
    private parentNativeElement: any; 

    private width:number=1200; 
    private height:number=600; 

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

    } 
    ngOnInit() { 
    this.d3.select(this.parentNativeElement).style("color", "red"); 
    let color = this.d3.scaleOrdinal(this.d3.schemeCategory20); 

    var nodes = [ 
     {"id": "Alice"}, 
     {"id": "Bob"}, 
     {"id": "Carol"} 
    ]; 

    var links = [ 
     {"source": "0", "target": "1"}, 
    ]; 

    var simulation = this.d3.forceSimulation(nodes) 
     .force("charge", this.d3.forceManyBody()) 
     .force("link", this.d3.forceLink(links) .id(function(d){return d.id})) 
     .force("center",this.d3.forceCenter()); 

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

    var node = this.parentNativeElement.append("g") 
     .attr("class", "nodes") 
     .selectAll("circle") 
     .data(nodes) 
     .enter().append("circle") 
     .attr("r", 25) 
     .attr("fill", function(d) { return color(d.group); }); 


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

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

    /* .call(d3.drag() 
     .on("start", dragstarted) 
     .on("drag", dragged) 
     .on("end", dragended));*/ 
    /*this.sdps.getSystemsWithRelataions();*/ 
    } 

} 

Answer 1

做大量的自我研究，我想出了這個工作的代碼。 我希望它能幫助你們中的一些人！

credits to mike bostock Force-Directed Graph

d3/d3-force

private width: number = 1800; 
private height: number = 600; 
var svg = this.d3.select(this.parentNativeElement).append("svg"); 
svg.attr("width", this.width).attr("height", this.height); 
let color = this.d3.scaleOrdinal(this.d3.schemeCategory20); 
var nodes=[{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}] 
var links = [ 
     {"source": "Alice", "target": "Bob"}, 

    ]; 
var simulation = this.d3.forceSimulation(nodes) 
     .force("charge", this.d3.forceManyBody()) 
     .force("link", this.d3.forceLink(links).id(function (d:{ id: string ,group:number}) { 
     return d.id 
     })) 
     .force("center", this.d3.forceCenter(this.width/2, this.height/2)); 
var link = svg.append("g") 
     .attr("class", "links") 
     .selectAll("line") 
     .data(links) 
     .enter().append("line"); 

    var that = this; 
    var node = svg.append("g") 
     .attr("class", "nodes") 
     .selectAll("circle") 
     .data(nodes) 
     .enter().append("circle") 
     .attr("r", 25) 
     .attr("fill",function(d:{ id: string ,group:number}) { return color(d.id.toString()); }) 


    simulation 
     .nodes(nodes) 
     .on("tick", function() { 
     link 
      .attr("x1", function (d: SimulationLinkDatum<SimulationNodeDatum>) { 
      return (<SimulationNodeDatum>d.source).x 
      }) 
      .attr("y1", function (d: SimulationLinkDatum<SimulationNodeDatum>) { 
      return (<SimulationNodeDatum>d.source).y 
      }) 
      .attr("x2", function (d: SimulationLinkDatum<SimulationNodeDatum>) { 
      return (<SimulationNodeDatum>d.target).x 
      }) 
      .attr("y2", function (d: SimulationLinkDatum<SimulationNodeDatum>) { 
      return (<SimulationNodeDatum>d.target).y 
      }); 
     node 
      .attr("cx", function (d: SimulationNodeDatum) { 
      return d.x; 
      }) 
      .attr("cy", function (d: SimulationNodeDatum) { 
      return d.y; 
      }); 
     }); 
    this.d3.selectAll("circle").call(this.d3.drag().on("start", function (d: SimulationNodeDatum) { 
     if (!that.d3.event.active) simulation.alphaTarget(0.3).restart(); 
     d.fx = d.x; 
     d.fy = d.y; 
     console.log(d) 
    }).on("drag", function (d: SimulationNodeDatum) { 
     d.fx = that.d3.event.x; 
     d.fy = that.d3.event.y; 
    }).on("end", function (d: SimulationNodeDatum) { 
     if (!that.d3.event.active) simulation.alphaTarget(0); 
     d.fx = null; 
     d.fy = null; 
    })); 

Answer 2

我無法創建精確的例子，因爲你沒有提供的使用方法，如ticked()，但我已經創建http://bl.ocks.org/mbostock/4062045與angular2。你可以自由定製

我用miserables.json像筆者沒有，但你可以用

export var miserables = { 
    "nodes": [ 
    {id: 'Alice', name: 'Alice'}, {id: 'Bob', name: 'Bob'} 
    ], 
    "links": [ 
    {"source": "Alice", "target": "Bob"} 
    ] 
} 

更換內部src/miserables.ts的變量獲得2節點和1個鏈接例如，作爲你想。

CSS：

.links line { 
    stroke: #999; 
    stroke-opacity: 0.6; 
} 

.nodes circle { 
    stroke: #fff; 
    stroke-width: 1.5px; 
} 

完全Plunker：http://plnkr.co/edit/qcESHb3cCwD6NZL1yuhX?p=preview