如果可以访问合适的 topojson 和位图,我使用 topoJSON 文件通过 D3js 生成 SVG 可视化。然后我通过以下方式向其附加位图:
// Append bitmap
svg.append("image")
.attr("xlink:href", "./myimage.png")
.attr("width", width)
.attr("height", height)
.attr("class", "bg");
但这实际上只是添加了指向图像的链接。此外,当我选择 dataviz DOM 并将其另存为 SVG 时,我没有二进制位图,只有位图的链接。
是否可能,以及如何通过 D3js 或 javascript 将我的 .png 二进制文件真正嵌入到我的 SVG DOM 中?
另请参阅:https://rugger-demast.codio.io/front/_location_map-en-wikiatlas.html ,您可以在其中尝试下载 SVG。
最佳答案
此示例显示如何将图像绘制到 Canvas 元素并使用 .toDataURL
函数将此 Canvas 的快照转换为字符串,然后您可以将其用作 xlink: href
属性:
关于javascript - 如何将位图嵌入到 D3js 生成的 SVG 代码中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23795776/