使用 Filesaver.js 的 D3JS 图形无法导出 Font Awesome 图标

Question

我使用D3JS 创建了一个力导向图，并用字体真棒图标替换了节点。一切正常，直到我尝试将其转换为 blob 并使用 filesaver.js 下载它。

这是我用来创建力有向图的代码： https://bl.ocks.org/heybignick/3faf257bbbbc7743bb72310d03b86ee8

这是我用来将 SVG 图形转换为 blob 的代码： http://bl.ocks.org/Rokotyan/0556f8facbaf344507cdc45dc3622177

这是我用字体真棒图标替换圆形节点的代码部分：

node.append('text')
    .attr("class", "nodeText")
    .attr('text-anchor', 'middle')
    .attr('dominant-baseline', 'central')
    .attr('font-family', 'Font Awesome\\ 5 Free')
    .style("stroke", "green")
    .text('\uf007');

我希望图像输出将与上面的力导向图相同，但使用字体真棒图标而不是圆形节点。

Answer 1

一段时间后，我终于意识到我需要将 Font Awesome 图标转换为 svg 路径，而不是将其作为 <i class="fas fa-user" /> 或文本 '\uf007'。