本文整理汇总了TypeScript中d3.layout.force方法的典型用法代码示例。如果您正苦于以下问题：TypeScript layout.force方法的具体用法？TypeScript layout.force怎么用？TypeScript layout.force使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类d3.layout的用法示例。
在下文中一共展示了layout.force方法的1个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: runSim
runSim(graph: IPanamaPapersGraph) {
let width = this.width || (window.innerWidth - 50), height = this.height || (window.innerHeight - 50);
// force layout setup
let force = d3.layout.force()
.charge(-500)
.linkDistance(500)
.linkStrength(0.1)
.size([width, height])
// setup svg div on this.eltRef.nativeElement.firstChild
let svg = d3.select(this.eltRef.nativeElement.firstChild).append('svg')
.attr('width', width).attr('height', height)
.attr('pointer-events', 'all');
// Let's populate the nodes
force.nodes(graph.nodes)
.links(graph.links)
.start();
// render relationships as lines
let link = svg.selectAll('.link')
.data(graph.links)
.enter()
.append('line')
.attr('class', (d) => 'link ' + d.type);
// render nodes as circles, css-class from label
let node = svg.selectAll('.node')
.data(graph.nodes).enter()
.append('g')
.attr('class', (d) => 'node ' + d.label )
.call(force.drag);
node.append('circle')
.attr('r', 10);
node.append('text')
.attr('x', 12)
.attr('dy', '.35em')
.text((d) => d.title );
// force feed algo ticks for coordinate computation
force.on('tick', () => {
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('transform', (d: any) => 'translate(' + d.x + ',' + d.y + ')');
});
}开发者ID:aendrew，项目名称:angular-d3-typescript-presentation，代码行数:52，代码来源:panama-paper-network.component.ts