[英]d3.js: run the same code in Angular app and on node.js
I need to add some infographics into Angular 5 app. 我需要在Angular 5应用程序中添加一些信息图表。 I've chosen d3.js for that.
我为此选择了d3.js。 I also need to be able to do export of graphs, ie make SVGs with Node and wrap them inside PDF.
我还需要能够导出图形,即使用Node制作SVG并将其包装在PDF中。
Fortunately it's rather simple to make code that makes d3 graph in browser work on node.js. 幸运的是,制作使浏览器中的d3图形工作在node.js上的代码相当简单。 The following lines do that...
以下几行做到了......
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
After that only minor changes to code that works in browser are required. 之后,只需对浏览器中的代码进行微小更改即可。
Obviously I don't want to have 2 copies of almost the same code, so I need a way to organize usage of the functions that create SVG (I'd prefer if that was Typescript not javascript) on both angular app side and node app side. 显然我不想拥有两个几乎相同代码的副本,所以我需要一种方法来组织在角度应用程序端和节点应用程序上创建SVG(我更喜欢那些是Typescript而不是javascript)的函数的使用侧。 Unfortunately I don't have to much experience in Node and don't see an easy solution for that.
不幸的是,我没有太多的Node经验,也没有看到一个简单的解决方案。
Here are my questions... 这是我的问题......
Thank you in advance! 先感谢您!
I would like to suggest the following solution. 我想建议以下解决方案。
First of all, no matter which front-end framework you actually use right now. 首先,无论您现在实际使用哪个前端框架。 If I got your idea correctly, you need to have a picture/screenshot of the d3js chart, in order to use it in PDF in the future .
如果我的想法正确,您需要有d3js图表的图片/屏幕截图 ,以便将来在PDF中使用它。 Is it correct?
这是正确的吗?
You need to write a utility, to be able to open the real web page with your chart component and make a screenshot (with a resolution you want ofc) It might be a combination of the protractor with chrome-browser, for example. 您需要编写一个实用程序,以便能够使用您的图表组件打开真实的网页并制作屏幕截图(具有您想要的分辨率)例如,它可能是量角器与chrome浏览器的组合。 (there are a lot of solutions, actually, we could even use PhantomJS . In my experience using Protractor simpler and easier to implement).
(有很多解决方案,实际上,我们甚至可以使用PhantomJS 。根据我使用Protractor的经验更简单,更容易实现)。 Also, Protractor has an internal feature to make screenshots of the page and save to the particular folder.
此外, Protractor还有一个内部功能,可以制作页面的屏幕截图并保存到特定的文件夹中。
Which benefits we have following that solution: 我们遵循该解决方案有哪些好处:
The job might look like below: 工作可能如下所示:
If you want to do it on the server side, you can have an api which will generate the graphics and return the element. 如果你想在服务器端这样做,你可以有一个api,它将生成图形并返回元素。 You can directly plug it in the UI and also use the same function for you PDF generation.
您可以直接在UI中插入它,也可以使用相同的功能为您生成PDF。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.