javascript 将 FontAwesome 图标添加到 D3 图形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18416749/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding FontAwesome icons to a D3 graph
提问by blueFast
I am trying to set an icon with FontAwesomeinstead of text in my D3 nodes. This is the original implmentation, with text:
我试图在我的 D3 节点中设置一个带有FontAwesome的图标而不是文本。这是原来的实现，文字如下：
g.append('svg:text')
.attr('x', 0)
.attr('y', 4)
.attr('class', 'id')
.text(function(d) { return d.label; });
And now I try with icons:
现在我尝试使用图标：
g.append('svg:i')
.attr('x', 0)
.attr('y', 4)
.attr('class', 'id icon-fixed-width icon-user');
But this is not working, even though the markup is right, and the CSS rules are properly hit: the icons are not visible.
但这不起作用，即使标记是正确的，并且正确命中 CSS 规则：图标不可见。
Any idea why?
知道为什么吗？
Here is the related jsbin
这是相关的jsbin
EDIT
编辑
I have found this alternative to insert images: http://bl.ocks.org/mbostock/950642
我找到了插入图像的替代方法：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);
Which is exactly what I want to do, but it does not work with <i>elements used by FontAwesome.
这正是我想要做的，但它不适<i>用于 FontAwesome 使用的元素。
回答by Carles Andres
You need to use the proper Unicode inside a normal text element, and then set the font-family to "FontAwesome" like this:
您需要在普通文本元素中使用正确的 Unicode，然后将字体系列设置为“FontAwesome”，如下所示：
node.append('text')
.attr('font-family', 'FontAwesome')
.attr('font-size', function(d) { return d.size+'em'} )
.text(function(d) { return '\uf118' });
This exact code will render an "icon-smile" icon. The unicodes for all FontAwesome icons can be found here:
这个确切的代码将呈现一个“图标微笑”图标。可以在此处找到所有 FontAwesome 图标的 unicode：
http://fortawesome.github.io/Font-Awesome/cheatsheet/
http://fortawesome.github.io/Font-Awesome/cheatsheet/
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 \uf118in your javascript.
请注意，您需要将备忘单中的代码从 HTML/CSS unicode 格式调整为 Javascript unicode 格式，以便必须\uf118在您的 javascript 中编写。
回答by blueFast
Thanks to all that replied. My final solution is based on the answer by CarlesAndres:
感谢所有回答。我的最终解决方案基于 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]; });
Be careful with your CSS: it takes precedence over the SVG attributes.
小心你的 CSS：它优先于 SVG 属性。
And this is the way it looks:
这是它的外观：
The good thing about this, compared to the foreignObjectsolution, is that events are properly handled by D3.
与foreignObject解决方案相比，这样做的好处是事件由 D3 正确处理。
回答by Irvin Dominin
I'm truly new to d3, but font awesome works by styling an <i>element with a class attribute.
我真的是 d3 的新手，但是 font awesome 通过为<i>具有 class 属性的元素设置样式来工作。
The only way I found is to append a foreignObjectand set on it the relevant HTML needed by font awesome.
我发现的唯一方法是附加 aforeignObject并在其上设置 font awesome 所需的相关 HTML。
Reference:
参考：
http://fortawesome.github.io/Font-Awesome/examples/
http://fortawesome.github.io/Font-Awesome/examples/
Code:
代码：
g.append('svg:foreignObject')
.attr("width", 100)
.attr("height", 100)
.append("xhtml:body")
.html('<i class="icon-fixed-width icon-user"></i>');
回答by Jean-Paul
Given that the other answers don't work anymore (because d3js has been updated in the meanwhile) and because it's nota good solution to use svg:foreignObjectdue to compatability issues, here is an answer that works without having to use any hacks:
鉴于其他答案不再有效（因为 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)
Here is a working example (click "Run code snippet" and the d3 code outputs three stars):
这是一个工作示例（单击“运行代码片段”，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="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>回答by JasTonAChair
I know this question is old, been resolved, but - this worked for me today.
我知道这个问题很老，已解决，但是 - 今天这对我有用。
From this site
从这个网站
svg.append('svg:foreignObject')
.attr("width", 50)
.attr("height", 50)
.append("xhtml:body")
.html('<i class="fa fa-user"></i>');
But for my chart, I dropped the append xhtml:body, otherwise it wouldn't let me set x and y coords.
但是对于我的图表，我删除了 append xhtml:body，否则它不会让我设置 x 和 y 坐标。
The element will adopt the width and height of the font you set.
该元素将采用您设置的字体的宽度和高度。
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>')
回答by Jason
Just to put in code here what worked for me based on CarlesAndres's answer and mhd's comment:
只是在此处输入代码，根据 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' });
回答by Navin
Font awesome 4.x versions are not supporting if we use as follows
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' });
so replace this
所以更换这个
.attr('font-family', 'FontAwesome')
with
和
.attr("class", "fa")
Hope it helps for FA 4.x
希望它对 FA 4.x 有所帮助
