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

我无法创建确切的示例，因为您没有提供ticked()等已使用的方法，但我已经使用angular2创建了http://bl.ocks.org/mbostock/4062045。您可以自由定制

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

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

获取所需的2节点和1个链接示例。

<强>的CSS：

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

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

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

Answer 2

进行了大量的自我研究，我想出了这个有效的代码。我希望它会帮助你们中的一些人！

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;
    }));

d3.js强制图形类型为script和angular2

2 个答案: