57

我正在尝试在我的 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);

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

4

9 回答 9

86

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

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

这个确切的代码将呈现一个“icon-smile”图标。所有 FontAwesome 图标的 unicode 可以在这里找到：

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

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

于 2013-10-15T15:23:01.393 回答
36

感谢所有回复。我的最终解决方案基于 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 正确处理。

于 2013-11-10T16:25:10.840 回答
12

我真的是 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/

于 2013-08-24T09:35:38.960 回答
8

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

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

于 2018-09-16T16:11:07.603 回答
4

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

从这个网站

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>')
于 2016-04-21T03:31:05.910 回答
3

根据 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' });
于 2017-05-24T13:27:01.817 回答
3

如果我们按如下方式使用 Font Awesome 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 有所帮助

于 2020-04-30T14:08:16.050 回答
2

对于那些用力敲打头的人。D3 - 6.2.0 和 FontAwesome - 5.13.0 以下工作

nodeEnter.append('text')
    .attr('width', "10px" ).attr('height', "10px" ) // this will set the height and width
    .attr("class","fas fa-adjust") // Font Awesome class, any
    .attr("x", 15) // for placement on x axis
    .attr("y",-5); // for placement on y axis
于 2020-09-28T13:56:13.420 回答
1

对于那些想要在 D3 中使用来自 FontAwesome 的 svg 图标的人，这个片段应该可以工作：

btnGroup.append("g")
  .attr("width", 16)
  .attr("height", 16)
  .attr("class", "fas fa-check-square");

这里唯一的缺点是宽度和高度不是从 CSS 继承的。好消息是 d3 和 jquery 的类切换按预期工作。

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

于 2020-10-05T09:58:45.810 回答