Question

我正在尝试在我的D3节点中使用FontAwesome而不是文本设置图标。这是原始的文件，文字：

g.append('svg:text')
    .attr('x', 0)
    .attr('y', 4)
    .attr('class', 'id')
    .text(function(d) { return d.label; });

现在我尝试使用图标：

g.append('svg:i')
   .attr('x', 0)
   .attr('y', 4)
   .attr('class', 'id icon-fixed-width icon-user');

但这不起作用，即使标记是正确的，并且CSS规则被正确命中：图标不可见。

知道为什么吗？

以下是相关的jsbin

修改

我找到了插入图片的替代方法：http://bl.ocks.org/mbostock/950642

node.append("image")
    .attr("xlink:href", "https://github.com/favicon.ico")
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 16)
    .attr("height", 16);

这正是我想要做的，但它不适用于FontAwesome使用的<i>元素。

Answer 1

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

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

此确切代码将呈现“图标微笑”图标。所有FontAwesome图标的unicodes都可以在这里找到：

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

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

Answer 2

感谢所有回复。我的最终解决方案是基于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属性。

这就是它的样子：

Node Graph

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

Answer 3

我是d3的新手，但是通过使用类属性设置<i>元素样式，字体很棒。

我找到的唯一方法是附加foreignObject并在其上设置字体真棒所需的相关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/

Answer 4

我知道这个问题已经过时了，已经解决了，但是 - 今天这对我有用了。

来自this site

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

但是对于我的图表，我删除了追加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>')

Answer 5

鉴于其他答案不再起作用（因为d3js已同时更新），并且因为不是是使用{{1} }由于兼容性问题，这是一个无需使用任何hack即可有效的答案：

svg:foreignObject

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

.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)

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

Answer 6

根据CarlesAndres的回答和mhd的评论，在这里输入适合我的代码：

node.append("text")
    .attr("style","font-family:FontAwesome;")
    .attr('font-size', "50px" )
    .attr("x", 440)
    .attr("y", 440)
    .text(function(d) { return '\uf118' });

Answer 7

如果使用以下方法，则不支持字体很棒的4.x版本

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")

希望它对FA 4.x有所帮助

Answer 8

适合那些用力敲打头的人。 D3-6.2.0和FontAwesome-5.13.0 下面工作了

xlPasteAll

Answer 9

对于那些想要在D3中使用FontAwesome中的svg图标的人，此代码段应该有效：

merge

这里唯一的缺点是宽度和高度不是从CSS继承的。好消息是，类切换可与d3和jquery一起正常工作。

演示与点击切换：https://jsfiddle.net/diafour/6fagxpt0/

将字体真棒图标添加到D3图表中

修改

9 个答案: