Добавление значков 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');

Но это не работает, хотя разметка правильная, и правила 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.

Ответы

Ответ 1

Вам нужно использовать правильный 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 можно найти здесь:

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

Имейте в виду, что вам нужно адаптировать коды в cheatsheet из формата unicode HTML/CSS в формат javascript unicode, чтобы &#xf118; должен быть записан \uf118 в вашем javascript.

Ответ 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.

Ответ 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/

Ответ 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>')

Ответ 5

Просто введите код здесь, что сработало для меня на основе ответа 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' });