如何将D3.js可视化渲染为JPG或图像?

时间:2017-01-25 16:41:32

标签: javascript d3.js svg

我使用ASP.NET 4.5,C#和D3.js构建了一个界面,在那里我绘制了人体的器官和骨骼。问题在于,当我尝试打印时,它几乎从未打印出来,我的用户希望在可视化旁边有一个“保存图像”按钮,这样他们就可以将保存的图像导入到他们自己的Word / PowerPoint月末报告中。

我不确定是否需要发布我的代码。我只是加载一些我在Illustrator中跟踪过的SVG,将其保存在JSON文件中并加载到D3中。

我知道打印屏幕可以是一个选项,但保存为图像也可以帮助我显示多个文件,而不会使我的浏览器超过D3代码。

1 个答案:

答案 0 :(得分:2)

基本上d3.js适用于SVG。您可以直接从d3.js工作版下载.svg图像。

Here是一个例子(来自Mike Bostock,d3.js创建者),他逐步从SVG转到PNG。

他使用了一些技巧,包括XML Serializing,Blob对象(有点像文件的对象用于原始数据(about)),最后使用canvas.toDataURL()从SVG创建另一个PNG图像。请查看来源,了解差异非常有趣和有用。

希望有所帮助

pltrdy