0

堆

  • FontAwesome v5
  • D3js v4
  • 角 4

设想

我有一个带有附加选项气泡的节点的层次结构树（将其视为米老鼠气球，其中面部是节点，附加节点是耳朵）。我希望这些选项显示一个图标，如 FontAwesome 的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' });

我还导入了 FontAwesome 5 javascript CDNindex.html

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

在此处输入图像描述

以上是我们目前拥有的。左耳有.text('i')，右耳是我要渲染的 FontAwesome 图标。

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

可能的解决方案

我在另一篇文章中找到了这个解决方案，这几乎正是我所需要的，但不确定如何将所有内容组合在一起。

要求

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

谢谢！

4

2 回答 2

4

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

于 2018-02-28T19:34:31.600 回答
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 链接（也如上所示）。

于 2018-10-25T17:21:53.057 回答