保存高分辨率PNG,其中包含的图像在图表中使用d3.js在observablehq.com上保存

发布于 2025-01-26 16:30:48 字数 363 浏览 3 评论 0 原文

使用d3.js创建图表时,我可以使用以下方式包括一个外部图像:

svg.append("svg:image").attr("x", 100).attr("y", 100).attr(
"xlink:href",
"https://my-url.com/image.svg"
);

但是,当我尝试使用此代码(对于高分辨率),该图像未显示在PNG中。

我已经做了一个

我一直在尝试以不同的方式获取图像并将其转换为SVG节点,但是我无法成功地正确解析结果。欢迎任何帮助,谢谢。

When creating a chart with D3.js, I can include an external image using :

svg.append("svg:image").attr("x", 100).attr("y", 100).attr(
"xlink:href",
"https://my-url.com/image.svg"
);

But when I try to save the chart as a PNG using a modified version of this code (for high resolution), the image doesn't show up in the PNG.

I've made a test notebook here where you can try yourself.

I've been trying to fetch the image differently and transform it into a svg node, but I could not succeed in parsing the result properly. Any help is welcome, thank you.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

听,心雨的声音 2025-02-02 16:30:48

这有点骇人听闻,但它可能对您有用:

This is a little hacky, but it might work for you: https://observablehq.com/@shan/save-high-resolution-png-with-imported-image

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文