如何在 D3js v4 和 Angular 4 中实现 FontAwesome v5 图标
H.特鲁希略
堆
- 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 CDN index.html
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
以上是我们目前所拥有的。左耳有.text('i')，右耳是我试图渲染的 FontAwesome 图标。
此外，我们已经在整个应用程序中使用 FontAwesome
<i>，但我不确定如何将其用作字体系列以便能够在 SVG 中使用 D3 实现它。
可能的解决方案
我在另一篇文章中找到了这个解决方案，这几乎正是我所需要的，但不确定如何将所有内容整合在一起。
要求
有人可以提供一些示例代码来展示如何text在 Angular 4 中创建的 D3.js V4 svg 中导入和使用 FontAwesome v5 ？
谢谢！
普克罗
为了使答案正式化，我创建了这个fiddle。将 an 附加svg:foreignObject到 svg 并添加相应的 html 以获得字体真棒字符。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在 ionic framework v4 和 Angular 7 中调整图标大小
- 2
d3.js的v4和v5之间的兼容性
- 3
如何在分组的条形图d3js v4中减小矩形大小
- 4
如何使用 Canvas 在 d3 v4/v5 中平移滚动
- 5
如何在D3.js v4中实现具有不同方向的多个树？
- 6
D3js v4。如何确定自定义事件？
- 7
调整对中力大小/更改中心-D3JS V4
- 8
调整对中力大小/更改中心-D3JS V4
- 9
将文本追加到d3js v4中的分组条形图
- 10
更改FontAwesome和Angular 10中的图标
- 11
如何在 Swift 3 和 4 中发布 Google Sheets API V4 的值？
- 12
如何在D3中从V4转换为V3
- 13
是否可以在 FontAwesome v4.7 中使用 FontAwesome v5 图标？
- 14
d3.js v4和AngularJS中不受信任的HTML
- 15
d3.js v4和AngularJS中不受信任的HTML
- 16
如何在最新的 Angular 中使用 bootstrap v4？
- 17
如何在angular v4 ts中共享变量并跟踪它在多个组件中的变化
- 18
如何在 bootstrap v4 中对齐输入和按钮样式的链接？
- 19
如何在 ionic v4 中同时包含左侧和右侧的侧边菜单？
- 20
Powershell v4和v5之间的Join-Path cmdlet的行为
- 21
Powershell v4和v5之间的Join-Path cmdlet的行为
- 22
如何在d3 v4中绘制力图？
- 23
如何在 d3 v4 中制作可点击的过渡条形图？
- 24
如何在d3.js v4中设置连续刻度（例如scaleLinear）上的填充？
- 25
如何在d3.js v4中的连接点处平滑两条曲线？
- 26
如何在反应路由器 v4 中实现嵌套路由（子路由）？
- 27
在v4中拖动d3.js时如何设置原点
- 28
如何从GA v4迁移到GTM v5（移动版）？
- 29
如何在Go中验证UUID v4？
我来说两句