javascript - fonticons - Agregar iconos de FontAwesome a un gráfico D3

font awesome menu (5)

Estoy intentando configurar un icono con FontAwesome lugar de texto en mis nodos D3. Esta es la implementación original, con texto:

g.append(''svg:text'') .attr(''x'', 0) .attr(''y'', 4) .attr(''class'', ''id'') .text(function(d) { return d.label; });

Y ahora lo intento con iconos:

g.append(''svg:i'') .attr(''x'', 0) .attr(''y'', 4) .attr(''class'', ''id icon-fixed-width icon-user'');

Pero esto no funciona, a pesar de que el marcado es correcto, y las reglas de CSS se ven afectadas correctamente: los iconos no son visibles.

¿Alguna idea de por qué?

Aquí está el jsbin relacionado

EDITAR

He encontrado esta alternativa para insertar imágenes: 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);

Que es exactamente lo que quiero hacer, pero no funciona con los elementos  utilizados por FontAwesome.

Gracias a todos los que contestaron. Mi solución final se basa en la respuesta de Carles Andres:

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

Tenga cuidado con su CSS: tiene prioridad sobre los atributos de SVG.

Y esta es la forma en que se ve:

Lo bueno de esto, en comparación con la solución foreignObject , es que los eventos son manejados adecuadamente por D3.

Necesita usar el Unicode apropiado dentro de un elemento de texto normal, y luego establecer la familia de fuentes en "FontAwesome" de esta manera:

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

Este código exacto representará un ícono de "icono de sonrisa". Los unicodes para todos los iconos de FontAwesome se pueden encontrar aquí:

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

Tenga en cuenta que debe adaptar los códigos en la hoja de seguridad desde el formato de HTML / CSS unicode al formato de Javascript unicode para que  debe escribirse /uf118 en su javascript.

Sé que esta pregunta es antigua, ha sido resuelta, pero ... esto funcionó para mí hoy.

Desde este sitio

svg.append(''svg:foreignObject'') .attr("width", 50) .attr("height", 50) .append("xhtml:body") .html('''');

Pero para mi tabla, solté el xhtml:body append xhtml:body contrario, no me dejaría establecer coordenadas xey.

El elemento adoptará el ancho y alto de la fuente que establezca.

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

Solo para poner aquí el código que funcionó para mí basado en la respuesta de Carles Andres y el comentario de mhd:

node.append("text") .attr("style","font-family:FontAwesome;") .attr(''font-size'', "50px" ) .attr("x", 440) .attr("y", 440) .text(function(d) { return ''/uf118'' });

Soy realmente nuevo en d3, pero la fuente funciona increíble al diseñar un elemento  con un atributo de clase.

La única forma que encontré es agregar un foreignObject y configurar el HTML relevante que necesita la fuente.

Referencia:

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/

Código:

g.append(''svg:foreignObject'') .attr("width", 100) .attr("height", 100) .append("xhtml:body") .html('''');

Demostración: http://jsbin.com/eFAZABe/3/