如何在D3js v4和Angular 4中实现v5图标

堆栈

• FontAwesome v5
• D3JSV4
• 角度4

场景

我有一个层次结构树，其中的节点附加了选项气泡（将其视为米老鼠气球，其中面是节点，附加的节点是耳朵）。我想这些选项显示一个图标，如丰盛的更多信息或删除

mickey.append('text')
  .attr('x', 15)
  .attr('y', -17)
  .attr('fill', 'black')
  .attr('font-family', 'FontAwesome')
  .attr('font-size', function (d) { return '20px' })
  .text(function (d) { return '\uf2b9' });

我还在

index.html

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

以上是我们目前拥有的。左耳有

.text（'i'）

，右耳是我试图渲染的图标

另外，我们已经在整个应用程序中使用了FontAwesome，使用的是

，但我不确定如何将其作为字体系列使用，以便能够在SVG中使用D3实现它

可能的解决方案

我在另一篇文章中找到了这篇文章，这篇文章几乎正是我所需要的，但我不知道如何把所有的东西结合起来

请求

有人能提供一些示例代码来说明如何在Angular 4中创建的D3.js V4中导入和使用FontAwesome v5吗

---

谢谢

为了将答案形式化，我创建了这个。

---

将一个

svg:foreignObject

附加到svg上，并添加相应的html以获得令人敬畏的字体字符。

为了将我创建的答案形式化。

---

将一个

svg:foreignObject

附加到svg上，并添加相应的html以获得字体可怕的字符。

以上链接底部回答了这个问题

因此：

svg.append('text')
   .attr('x', 15)
   .attr('y', -17)
   .attr('fill', 'black')
   .attr('font-family', 'FontAwesome')
   .attr('font-size', function (d) { return '20px' })
   .text(function (d) { return '\uf2b9' });

替换：

   .attr('font-family', 'FontAwesome')

与

---

请记住使用更新的css链接（如上所示）。

以上链接底部回答了这个问题

因此：

svg.append('text')
   .attr('x', 15)
   .attr('y', -17)
   .attr('fill', 'black')
   .attr('font-family', 'FontAwesome')
   .attr('font-size', function (d) { return '20px' })
   .text(function (d) { return '\uf2b9' });

替换：

   .attr('font-family', 'FontAwesome')

与

---

请记住使用更新的css链接（如上所示）。

您尝试过什么？请发布一些代码，以便我们能更好地帮助您。@pmkro有帮助吗？仍然没有足够的帮助，到底是什么不起作用？我上传了一张图片。右侧实现了FontAwesome作为字体系列，但图标不是Rendering是否有帮助？在foreignObject中创建了html元素。这是你发布的链接上的回复之一。你尝试过什么？请发布一些代码，以便我们能更好地帮助您。@pmkro有帮助吗？仍然没有足够的帮助，到底是什么不起作用？我上传了一张图片。右侧实现了FontAwesome作为字体系列，但图标不是Rendering是否有帮助？在foreignObject中创建了html元素。这是您发布的链接上的回复之一。有趣的是，他最初使用UTF代码的方法不起作用（我以前就是这样做的）。ForeignObjects总是觉得有点不对。我想这是因为我导入了新的SVG js格式，这本质上是与我提供的StackOverflow示例唯一不同的地方。有趣的是，他最初使用UTF代码的方法不起作用（我以前就是这样做的）。ForeignObjects总是觉得有点不对。我想这是因为我导入了新的SVG js格式，这本质上是与我提供的StackOverflow示例唯一不同的地方。