如何在Angular 4与D3.js v4中为层级树节点添加FontAwesome v5图标

嘿，我来帮你搞定这个FontAwesome图标在D3气泡里的显示问题！

你之前用.text('i')能显示文本，但FontAwesome图标不是普通文本，得用它专属的渲染方式才行。结合你已经引入FontAwesome 5 JS CDN的情况，我给你两种靠谱的实现方案：

方案1：用FontAwesome自定义元素（适配JS CDN） #

因为你已经引入了FontAwesome的JS CDN（比如官方Kit），可以直接用它提供的<fa-icon>自定义元素，步骤很简单：

// 假设你创建右侧气泡的容器是个<g>元素（根据你的布局调整位置）
const rightBubble = nodeEnter.append('g')
  .attr('transform', 'translate(30, 0)'); // 这里的位移值对应你气泡的位置

// 添加删除图标
rightBubble.append('fa-icon')
  .attr('icon', 'times') // 图标名称，info图标就写'info-circle'
  .attr('style', 'width:18px; height:18px; color:#ff4444;'); // 自定义大小和颜色

注意要确保D3代码在FontAwesome脚本加载完成后执行（比如放在DOMContentLoaded事件里），不然自定义元素可能识别不了。

方案2：用FontAwesome字体（需额外引入CSS） #

如果你更倾向于用SVG文本元素渲染，就需要引入FontAwesome的CSS文件（比如在index.html里加<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">），然后通过Unicode字符+字体设置来实现：

// 右侧气泡用FontAwesome删除图标
nodeEnter.append('text')
  .attr('x', 30) // 气泡位置
  .attr('y', 0)
  .attr('text-anchor', 'middle')
  .attr('font-family', 'Font Awesome 5 Free') // 字体族，solid风格用这个
  .attr('font-weight', 900) // solid风格必须设置这个权重
  .text('\f00d') // 删除图标的Unicode，info图标是'\f05a'
  .style('font-size', '18px')
  .style('fill', '#ff4444');

为啥你之前没成功？ #

你之前应该是直接给文本元素写了.text('fa-times')或者类似的内容，但FontAwesome图标不是靠文本字符串识别的——要么是通过自定义元素的icon属性，要么是字体+Unicode的组合，直接写图标名称只会显示普通文本~

内容的提问来源于stack exchange，提问作者H. Trujillo