d3.js：在 Angular 应用程序和 node.js 上运行相同的代码

Posted 2023-02-22

【中文标题】d3.js：在 Angular 应用程序和 node.js 上运行相同的代码

【英文标题】：d3.js: run the same code in Angular app and on node.js

【发布时间】：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'; 来检测浏览器，与s-s-r 一起使用。不确定您的确切要求，但有一些示例可能会为您提供正确的模式。

【参考方案1】：

我想建议以下解决方案。

首先，不管你现在实际使用的是哪个前端框架。 如果我的想法正确，您需要有 d3js 图表的图片/屏幕截图，以便将来在 PDF 中使用它。对吗？

您需要编写一个实用程序，以便能够使用您的图表组件打开真实网页并制作屏幕截图（具有您想要的分辨率）它可能是量角器与 chrome-browser 的组合，例如. （有很多解决方案，实际上，我们甚至可以使用 PhantomJS。根据我使用 Protractor 的经验，更简单、更容易实现）。此外，Protractor 有一个内部功能，可以截取页面并保存到特定文件夹。

遵循该解决方案我们有哪些好处：

唯一一个有图表渲染相关源码的地方 100% 确保图表视图与真实网页上的相同（带有 其他角度组件） 我们不需要找到在 Node.JS 端渲染 SVG 的方式等等...

作业可能如下所示：

启动一些 NPM/Gulp/Grunt（随便）任务来打开特定的 使用 Protractor 和 Chrome 浏览器打开您的网络应用页面。 打开只有图表组件+数据层的虚拟页面。 截屏并保存到特定文件夹。使用截图 PDF 中的图表（手动或使用其他工具）

【讨论】：

是的，您已经正确理解了我需要有 d3js 图表的图片/屏幕截图，以便将来在 PDF 中使用它。即使是 svg 也可以！

【参考方案2】：

如果你想在服务器端做，你可以有一个 api 来生成图形并返回元素。您可以直接将其插入 UI，也可以使用相同的功能生成 PDF。