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

查看:1066
本文介绍了将FontAwesome图标添加到D3图形的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我尝试使用 FontAwesome 设置图标,而不是我的D3节点中的文字。这是原始的含义,带有文本:

  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');

但这不工作,即使标记是正确的,



这里是相关的 jsbin



EDIT



找到了此插入图片的备选方案: 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使用的元素。

解决方案

正常文本元素,然后将font-family设置为FontAwesome,如下所示:

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

这个确切的代码会呈现一个icon-smile图标。所有FontAwesome图标的unicode都可以在这里找到:



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



请注意,您需要调整HTML / CSS中的编码表中的代码unicode格式为Javascript unicode格式,以便&#xf118; 必须在您的javascript中写入 \\\ / p>

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; });

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.

Any idea why?

Here is the related jsbin

EDIT

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

Which is exactly what I want to do, but it does not work with <i> elements used by 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' }); 

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/

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆