您需要在普通文本元素中使用正确的 Unicode，然后将字体系列设置为“FontAwesome”，如下所示：

 node.append('text')
    .attr('font-family', 'FontAwesome')
    .attr('font-size', function(d) { return d.size+'em'} )
    .text(function(d) { return '\uf118' }); 

这个确切的代码将呈现一个“图标微笑”图标。可以在此处找到所有 FontAwesome 图标的 unicode：

http://fortawesome.github.io/Font-Awesome/cheatsheet/

请注意，您需要将备忘单中的代码从 HTML/CSS unicode 格式调整为 Javascript unicode 格式，以便必须\uf118在您的 javascript 中编写。

感谢所有回答。我的最终解决方案基于 CarlesAndres 的回答：

g.append('text')
    .attr('text-anchor', 'middle')
    .attr('dominant-baseline', 'central')
    .attr('font-family', 'FontAwesome')
    .attr('font-size', '20px')
    .text(function(d) { return ICON_UNICODE[d.nodeType]; });

小心你的 CSS：它优先于 SVG 属性。

这是它的外观：

与foreignObject解决方案相比，这样做的好处是事件由 D3 正确处理。

我真的是 d3 的新手，但是 font awesome 通过为<i>具有 class 属性的元素设置样式来工作。

我发现的唯一方法是附加 aforeignObject并在其上设置 font awesome 所需的相关 HTML。

参考：

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject?redirectlocale=en-US&redirectslug=SVG%2FElement%2FforeignObject

http://fortawesome.github.io/Font-Awesome/examples/

代码：

g.append('svg:foreignObject')
    .attr("width", 100)
    .attr("height", 100)
    .append("xhtml:body")
    .html('<i class="icon-fixed-width icon-user"></i>');

演示：http : //jsbin.com/eFAZABe/3/

鉴于其他答案不再有效（因为 d3js 已同时更新）并且由于兼容性问题它不是一个好的使用解决方案svg:foreignObject，这里是一个无需使用任何黑客即可工作的答案：

.append("text")      // Append a text element
.attr("class", "fa") // Give it the font-awesome class
.text("\uf005");     // Specify your icon in unicode (https://fontawesome.com/cheatsheet)

这是一个工作示例（单击“运行代码片段”，d3 代码输出三颗星）：

var icons = [1, 2, 3];

d3.select("body")
  .selectAll(".text")
  .data(icons)
  .enter()
  .append("text")       // Append a text element
  .attr("class", "fa")  // Give it the font-awesome class
  .text("\uf005");      // Specify your icon in unicode

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

我知道这个问题很老，已解决，但是 - 今天这对我有用。

从这个网站

svg.append('svg:foreignObject')
    .attr("width", 50)
    .attr("height", 50)
    .append("xhtml:body")
    .html('<i class="fa fa-user"></i>');

但是对于我的图表，我删除了 append xhtml:body，否则它不会让我设置 x 和 y 坐标。

该元素将采用您设置的字体的宽度和高度。

d3.select('svg')
    .append('svg:foreignObject')
    .attr('class', 'handle')
    .attr('x',  +getLeftBarPosition(i+1, 'handle')[0] + +getLeftBarPosition(i+1, 'handle')[1])
    .attr('y', state.barHeight/2)
    .html('<i class="fa fa-user"></i>')