带有类型脚本和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屋!