Добавление значков FontAwesome на график D3

Вам нужно использовать правильный Unicode внутри обычного текстового элемента, а затем установить для семейства шрифтов значение «FontAwesome» следующим образом:

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

Этот точный код будет отображать значок «значок-улыбка». Юникоды для всех иконок FontAwesome можно найти здесь:

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

Имейте в виду, что вам необходимо адаптировать коды в шпаргалке из формата юникода HTML/CSS в формат юникода Javascript, чтобы  должно было быть написано \uf118 в вашем javascript.

Спасибо всем, что ответили. Мое окончательное решение основано на ответе 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.

Я действительно новичок в d3, но шрифт awesome работает, стилизуя элемент <i> с атрибутом класса.

Единственный способ, который я нашел, - это добавить foreignObject и установить на нем соответствующий HTML-код, необходимый для шрифта awesome.

Ссылка:

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/

Учитывая, что другие ответы больше не работают (поскольку тем временем 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)

Вот рабочий пример (щелкните «Выполнить фрагмент кода», и код 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>

Я знаю, что этот вопрос старый, он был решен, но сегодня это сработало для меня.

С этого сайта

svg.append('svg:foreignObject')
    .attr("width", 50)
    .attr("height", 50)
    .append("xhtml:body")
    .html('<i class="fa fa-user"></i>');

Но для своей диаграммы я удалил добавление 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>')

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

Версии 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

Для тех, кто сильно бьется головой. 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

Для тех, кто хочет использовать значки svg от FontAwesome с D3, этот фрагмент должен работать:

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

Единственный недостаток здесь в том, что ширина и высота не наследуются от CSS. Хорошей новостью является то, что переключение классов работает, как и ожидалось, с d3 и jquery.

Демонстрация с переключением по клику: https://jsfiddle.net/diafour/6fagxpt0/