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

Question

堆栈

• FontAwesome v5
• D3js v4
• Angular 4

方案

我有一个层次树，其中包含附加选项气泡的节点（将其视为米老鼠气球，其中面是节点，附加的节点是耳朵）。我希望这些选项能够显示FontAwesome＆＃39> i 等图标以获取更多信息，或x删除。

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

中导入了FontAwesome 5 javascript CDN

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

以上就是我们现在拥有的。左耳有.text('i')，右边是我想渲染的FontAwesome图标。

  

另外，我们已经在使用<i>的整个应用中使用了FontAwesome，但我不确定如何将其用作字体系列，以便能够使用D3实现它在SVG中。

可能的解决方案

我在另一篇文章中发现了this solution，这几乎就是我需要的，但不确定如何将所有内容整合在一起。

请求

有人可以提供一些示例代码，演示如何在Angular 4中创建的{3.} svg的D3.js V4中导入和使用FontAwesome v5吗？

谢谢！

Answer 1

为了使答案正式化我创建了这个fiddle。 将svg:foreignObject附加到svg并添加相应的html以获得字体真棒字符。

Answer 2

在上面链接的底部给出了答案。

适用于：

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')

使用

   .attr("class", "fa")

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