我需要将一些信息图表添加到 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 个副本，所以我需要一种方法来组织在 Angular 应用程序端创建 SVG 的函数的使用(如果是 Typescript 而不是 javascript，我更喜欢)和 Node 应用程序端。不幸的是，我在 Node 方面没有太多经验，也没有找到一个简单的解决方案。
这是我的问题...
- 我怎样才能简单地组织使用 d3 通过 angular 5 应用程序和 node.js 应用程序创建 SVG 的函数的使用？
- 也许用 node 渲染 d3.js 不是最好的解决方案，还有另一种更简单的方法？
提前致谢!
最佳答案
我想建议以下解决方案。
首先，不管你现在实际使用的是哪种前端框架。 如果我的想法正确，您需要有 d3js 图表的图片/屏幕截图，以便将来在PDF 中使用>。是否正确？
您需要编写一个实用程序，以便能够使用您的图表组件打开真实网页并制作屏幕截图(具有您想要的分辨率)它可能是 Protractor 与 chrome-browser 的组合，例如. (有很多解决方案，实际上，我们甚至可以使用 PhantomJS。根据我的经验，使用 Protractor 更简单，更容易实现)。此外，Protractor 有一个内部功能，可以制作页面的屏幕截图并保存到特定文件夹。
采用该解决方案我们有哪些好处:
- 唯一一个有图表渲染相关源码的地方
- 100% 确定图 TableView 与真实网页上的 View 相同(带有 其他 Angular 分量)
- 我们不需要找到在 Node.JS 端渲染 SVG 的方式等等...
作业可能如下所示:
- 启动一些 NPM/Gulp/Grunt(无论什么)任务来打开特定的 使用 Protractor 和 Chrome 浏览器访问您的网络应用页面。
- 打开只有图表组件 + 数据层的虚拟页面。
- 截屏并保存到特定文件夹。使用截图 PDF 中的图表(手动或使用其他工具)
关于javascript - d3.js:在 Angular 应用程序和 node.js 上运行相同的代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52275173/