在Angular 4应用程序中包含d3图

Question

我正在使用typescript构建一个Angular应用程序，我希望在其中显示来自Mike Boston build的强制定向网络图，其中d3显示为here。

我已经复制并翻译了大部分代码而没有麻烦但是行

. force("link", d3.forceLink().id(function(d) { return d.id; })) 

因错误{} has no property id而失败。

只有以下引用d.source.x的行正常工作？

虽然typings.d.ts有一个定义id的接口，但我已经用npm安装了d3并且还键入了/ d3但仍然没有运气。

谢谢您的帮助！

Answer 1

也许这与版本控制有关，如果您使用的是TypeScript 2.4.1，请尝试降级到2.3.4并试一试。

作为一种解决方法，您可以使用任何：

const forceLink: any = d3.forceLink(); 
. force("link", forceLink.id(function(d) { return d.id; })) 

Answer 2

http://plnkr.co/edit/qcESHb3cCwD6NZL1yuhX?p=preview给出的例子帮助了我，重点放在这里显示的代码：

this.simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

this.render(miserables);

这是我见过的最好的演绎。适合我。