Как можно реализовать иконки FontAwesome v5 в D3js v4 и Angular 4

Question

стек

• FontAwesome v5
• D3js v4
• Угловой 4

сценарий

У меня есть иерархическое дерево с узлами, к которым добавлены пузырьки опций (представьте, что это шар Микки Мауса, где лицо - это узел, а добавленные узлы - это уши). Я хотел бы, чтобы эти параметры отображали значок типа FontAwesome's i для получения дополнительной информации или x для удаления.

mickey.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' });

Я также импортировал CDN FontAwesome 5 javascript в index.html

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Выше это то, что мы имеем в настоящее время. Левое ухо имеет .text('i') и справа - иконка FontAwesome, которую я пытаюсь сделать.

Кроме того, мы уже используем FontAwesome во всем приложении, используя <i>Да, но я не уверен, как использовать его как семейство шрифтов, чтобы иметь возможность реализовать его с помощью D3 в SVG.

Возможное решение

Я нашел это решение в другом посте, который почти как раз то, что мне нужно, но не знал, как собрать все воедино.

Запрос

Может кто-нибудь предоставить пример кода, который показывает, как импортировать и использовать FontAwesome v5 в D3.js V4 создан text SVG в Angular 4?

Спасибо!

Answer 1

Чтобы формализовать ответ, я создал эту скрипку. Добавить svg:foreignObject на SVG и добавить соответствующий HTML, чтобы получить шрифт удивительный символ.

Answer 2

На это ответили внизу ссылки выше.

Таким образом, для:

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

И не забудьте использовать обновленную ссылку CSS (также показано выше).