【发布时间】：2019-02-15 21:56:30
【问题描述】：
我需要在 Angular 5 应用程序中添加一些信息图表。我为此选择了 d3.js。我还需要能够导出图形，即使用 Node 制作 SVG 并将它们包装在 PDF 中。
幸运的是，让浏览器中的 d3 图形在 node.js 上运行的代码相当简单。以下几行就是这样做的......
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
之后，只需对可在浏览器中运行的代码进行少量更改。
显然我不想拥有几乎相同代码的 2 个副本，因此我需要一种方法来组织在两个角度应用程序端创建 SVG 的函数的使用（如果那是 Typescript 而不是 javascript，我更喜欢）和节点应用程序端。不幸的是，我在 Node 方面没有太多经验，也没有看到一个简单的解决方案。
这是我的问题...
- 如何通过 Angular 5 应用和 node.js 应用简单地组织使用 d3 创建 SVG 的函数的使用？
- 也许用节点渲染 d3.js 不是最好的解决方案，还有另一个更简单的解决方案？
提前谢谢你！
【问题讨论】：
-
我能给你的最好建议是不要混合使用 Node.js 和 Angular。只需使用 Angular 作为前端框架，使用 node.js 作为后端框架，通过 REST API 向 Angular 提供数据。使用 node.js 来呈现你的角度页面没有任何意义。 Angular 旨在处理所有客户端逻辑，例如从 REST API 呈现和获取数据。
-
此外，您可以将 d3.js 导入您希望渲染的角度组件中。请注意，在角度景观中不允许直接 dom 操作，因为它会导致奇怪的行为。使用 d3.js 时，您无法完全避免这种情况，但至少可以将影响降到最低。
-
当你想在 Angular 中使用 d3.js 时，这可能对你有用，像这样导入它：
import * as d3 from 'd3';然后使用ngAfterContentInit生命周期钩子来定位 html 中的元素这个组件的。 -
@enf0rcer 感谢您的建议，我仍然不需要在 Node.js 上启动整个应用程序。我所需要的只是能够在角度端和节点端启动创建 SVG 的函数。我已经更新了问题以使其更清楚
-
您可以使用
import { isPlatformBrowser, isPlatformServer } from '@angular/common';来检测浏览器，与SSR 一起使用。不确定您的确切要求，但有一些示例可能会为您提供正确的模式。
标签： javascript node.js angular typescript d3.js