Javascript d3.js：在Angular app和node.js上运行相同的代码

我需要在Angular 5应用程序中添加一些信息图形。我选择了d3.js。我还需要能够做图形的导出，即使用节点生成SVG，并将它们包装在PDF中

幸运的是，让浏览器中的d3图形在node.js上工作的代码相当简单。下面几行就是这样做的

const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

在此之后，只需要对在浏览器中工作的代码进行微小的更改

显然，我不想拥有几乎相同代码的两个副本，所以我需要一种方法来组织创建SVG的函数的使用（如果是Typescript而不是javascript，我更喜欢它）在angular应用程序端和node应用程序端。不幸的是，我在Node方面没有太多的经验，也没有看到一个简单的解决方案

以下是我的问题

我如何通过angular 5 app和node.js app简单地组织使用d3创建SVG的函数的使用

也许用node渲染d3.js不是最好的解决方案，还有另一个更简单的解决方案

---

提前谢谢你

如果您想在服务器端执行此操作，可以使用api生成图形并返回元素。您可以直接将其插入UI，也可以使用相同的功能生成PDF。

我建议以下解决方案

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

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

采用该解决方案后，我们有哪些好处：

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

该作业可能如下所示：

• 启动一些NPM/Gulp/Grunt（无论什么）任务来打开特定的 使用量角器和Chrome浏览器创建web应用程序的页面
• 打开仅包含图表组件+数据层的虚拟页面
• 制作屏幕截图并保存到特定文件夹。使用截图 PDF中的图表（手动或使用其他工具）

---

我能给你的最好建议是不要将Node.js和Angular混合使用。只需使用angular作为前端框架，node.js作为后端框架，通过REST API向angular提供数据。使用node.js来呈现角度页面没有任何意义。Angular旨在处理所有客户端逻辑，如渲染和从REST API获取数据。此外，您只需在希望渲染数据的Angular组件中导入d3.js即可。请注意，直接dom操作不允许在角度范围内进行，因为它可能会导致奇怪的行为。在使用d3.js时，您不能完全避免这种情况，但至少可以将影响降至最低。当您想在angular中使用d3.js时，这可能对您很有用，请按如下方式导入：

import*作为“d3”中的d3

然后使用

ngAfterContentInit

生命周期钩子以该组件的html中的一个元素为目标。@enf0rcer感谢您的建议，我仍然不需要在节点上启动整个应用程序。我所需要的只是能够启动在角度侧和节点侧创建SVG的函数。我已经更新了这个问题，让它更清晰。你可以从“@angular/common”使用

import{isPlatformBrowser，isPlatformServer}

检测浏览器，与SSR一起使用。不确定您的确切要求，但有几个示例可能会为您提供正确的模式。是的，您已经正确理解了我需要一张d3js图表的图片/屏幕截图，以便将来在PDF中使用它。即使是svg也可以！