将 D3.js 树集成到 Angular 4 项目中答案

【问题标题】：Integrate a D3.js tree into a angular 4 project将 D3.js 树集成到 Angular 4 项目中
【发布时间】：2018-01-10 07:03:26
【问题描述】：

我正在开发一个网页，我想可视化某个树形结构。我碰到了这棵漂亮的 D3.js 树 (http://bl.ocks.org/robschmuecker/7880033)，但由于有多种方法（例如 dg3-ng2），我无法将其导入我的项目。

D3.js 是一个 javascript 库 - Angular 与 typescript 一起使用。

我如何将该特定树集成到我的项目中，以便之后我也可以轻松修改它？我确实有几个问题，例如：

在哪里导入 .js 和 .json 文件？
我必须手动将 javascript 代码转换为 typescript 吗？
我应该将 .js 代码写入 .ts 文件吗？
我应该在我的 index.html 中做一个引用吗？
我应该使用 D3 服务吗？

如你所见，我很困惑。

【问题讨论】：

开发成功了吗？如果可以请在代码spinet中分享它

标签： javascript angular typescript d3.js tree

【解决方案1】：

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

从 npm 安装 d3。
在这样的组件中导入 d3：
```
import * as d3 from 'd3';
```
然后给你写逻辑，使用 d3 语法，例如：

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

【讨论】：

感谢您的快速答复。但我仍然不知道。你介意回答我的问题吗？

【解决方案2】：

我强烈建议您使用 angular-cli，因为当您安装 d3 库时，您无需处理将其正确连接到应用程序的样板。您只需要将它导入到您的 ts 文档中，如上面的示例所示。在导入 json 时，有几种不同的处理方式。您可以将 json 存储在 .ts 文件中的变量中，也可以将其存储在静态 json 文档中，然后将其与应用程序一起托管，并且已经有许多提取文件和加载 json 数据的示例。李>
您不必转换任何 js 代码，因为 ts 本质上是带有类型的 js，尽管您可能需要为某些事情声明 any 类型，但如果您想要 ts 代码，则必须手动转换或者找一个ts例子。我强烈推荐一个与 ts 兼容的好 IDE。它会完成大量查找错误的繁重工作。
回答这个问题相当困难，因为我不知道您项目的规格。通常，如果您正在做一件不需要 angular 的一次性事情，我会使用 js 保持简单并放弃使用 angular。如果这是一个更大的应用程序的一部分，但我建议用 ts 编写它，因为 angular2+ 是用 ts 编写的，而且您在网上找到的大多数示例都在 ts 中。
如果您使用 angular-cli，则无需在 index.html 文件中进行引用
我不确定你在这里问什么。

根据您提出的问题，我强烈建议您真正了解 Angular 并学习如何使用它正确创建应用程序，然后弄清楚如何将 d3 集成到项目中，因为您提出的一些问题不是t 与仅在角度中使用 d3 相关。

【讨论】：