将 FontAwesome 图标添加到 D3 图形 [英] Adding FontAwesome icons to a D3 graph

问题描述

我正在尝试使用 FontAwesome 而不是我的 D3 节点中的文本来设置图标.这是原来的实现，有文字:

I am trying to set an icon with FontAwesome instead of text in my D3 nodes. This is the original implmentation, with text:

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 规则:图标不可见.

But this is not working, even though the markup is right, and the CSS rules are properly hit: the icons are not visible.

知道为什么吗?

这里是相关的jsbin

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

I have found this alternative to insert images: 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> 元素.

Which is exactly what I want to do, but it does not work with <i> elements used by FontAwesome.

推荐答案

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

You need to use the proper Unicode inside a normal text element, and then set the font-family to "FontAwesome" like this:

 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:

This exact code will render an "icon-smile" icon. The unicodes for all FontAwesome icons can be found here:

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

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

Be aware that you need to adapt the codes in the cheatsheet from HTML/CSS unicode format to Javascript unicode format so that  must be written uf118 in your javascript.

这篇关于将 FontAwesome 图标添加到 D3 图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！