将D3.js树集成到角度4项目中

Question

我正在开发一个网页，我希望可视化某个树形结构。 我遇到了这个美丽的D3.js树（http://bl.ocks.org/robschmuecker/7880033），但我将它导入到我的项目中有困难，因为有几种方法（例如dg3-ng2）。

D3.js是一个javascript-libary - 而Angular与typescript一起工作。

如何将该特定树集成到我的项目中，以便我之后可以毫无困难地修改它？ 我有几个问题，如：

• 我在哪里导入.js和.json文件？
• 我是否必须手动将javascript代码转换为打字稿？
• 我应该将.js代码写入.ts文件吗？
• 我应该在index.html中提供参考吗？
• 我应该使用D3服务吗？

你可以看到我很安静。

Answer 1

如果你使用Angular，那很简单）

1. 从npm安装d3。

2. 在组件中导入d3：

   import * as d3 from 'd3';
   

3. 写下你的逻辑，使用d3 syntaxis，例如：

   constructor(private element: ElementRef) { this.htmlElement = this.element.nativeElement; this.host = d3.select(this.element.nativeElement); }

你的图形是一个组件，在你的组件描述函数中构建svg，绘制轴等。 然后在init中描述的组件调用方法，例如：

ngOnInit(): void {
        this.setup();
        this.buildSVG();
        this.drawFirstPlanRects();
        this.drawSecondPlanRects();
        this.drawXAxis();
        this.drawYAxis();
        this.drawCrossLines();
    }

Answer 2

1. 我强烈建议使用angular-cli，因为当你安装d3库时，你不必处理将它连接到应用程序的锅炉板。您只需将其导入ts文档，如上例所示。在导入json时，有几种不同的方法可以处理它。您可以将json存储在.ts文件中的变量中，您可以将其存储在静态json文档中，然后将其与应用程序一起托管，并且有很多拉动文件和加载json数据的示例。
2. 你不必转换你拥有的任何js代码，因为ts本质上是js类型，虽然你可能必须为某些东西声明任何类型，但如果你想要ts代码，你将不得不手动转换或者找一个例子。我强烈推荐一个兼容ts的好IDE。发现错误会带来很多繁重的工作。
3. 回答这个问题相当困难，因为我不知道你的项目的规格。一般来说，如果你正在做一件不需要角度的东西，我只是用js保持简单并放弃角度的用法。如果这是一个更大的应用程序的一部分，虽然我建议用ts写它，因为angular2 +是用ts编写的，你在网上找到的大多数例子都是ts。
4. 如果您使用的是angular-cli，则无需在index.html文件中进行引用
5. 我不确定你在这里问的是什么。

从您提出的问题中我强烈建议您真正关注角度并学习如何使用它正确创建应用程序，然后弄清楚如何在项目中集成d3，因为您要问的一些问题不是'与刚刚使用角度的d3相关。