带有类型脚本和angular2的d3.js力图 [英] d3.js force graph with type script and angular2

问题描述

我正在尝试创建一个简单的力图(带有关系的2个节点)，其角度为2并键入script.并且无法使其正常工作.

i am trying to create a simple force graph (2 nodes with a relation) with angular 2 and type script . and cant make it work .

我希望为此提供一个可行的演示.

i would appreciate a working demo for this.

这是我想到的代码" idont知道它是否正确

this the code i came up with' idont know if its correct or not

   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();*/
  }

}

推荐答案

我无法创建确切的示例，因为您没有提供ticked()之类的使用方法，但是我已经创建了

I couldn't create the exact example since you didn't provide the used methods like ticked() but I've created http://bl.ocks.org/mbostock/4062045 with angular2. You're free to customize it

我已经像作者一样使用了miserables.json，但是您可以将src/miserables.ts中的变量替换为

I've used the miserables.json as the author did but you can replace the variable inside src/miserables.ts with

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

根据需要获取2节点和1链接示例.

To get the 2 node and 1 link example as you wanted.

css:

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

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

完整柱塞: http://plnkr.co/edit/qcESHb3cCwD6NZL1yuhX?p=预览

这篇关于带有类型脚本和angular2的d3.js力图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！