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

Question

堆栈

• FontAwesome v5
• D3js v4
• Angular 4

场景

我有一个层次结构树，其中的节点附加了选项气泡（可以把它想象成米老鼠气球，其中脸是节点，附加的节点是耳朵）。我希望这些选项显示一个图标，如 FontAwesome 的 i for more information or 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图标

Additonally, We are already using FontAwesome throughout the app using <i>'s, but I'm not sure how to use it as a font-family to be able to implement it with D3 in the SVG.

可能的解决方案

我在另一个 post 中找到了 this solution，这几乎正是我所需要的，但不确定如何将所有内容组合在一起。

请求

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

谢谢！

Answer 1

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

Answer 2

这是在上面 link 的底部回答的。

因此：

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 link（也如上所示）。