Adding FontAwesome icons to a D3 graph

Question

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(\         


        

Answer 1

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

But for my chart, I dropped the append xhtml:body, otherwise it wouldn't let me set x and y coords.

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