Ajouter des icônes FontAwesome à un graphique D3

j'essaie de mettre une icône avec FontAwesome au lieu de texte dans Mes noeuds D3. C'est l'implementation originale, avec du texte:

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

Et maintenant, j'essaie avec des icônes:

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

mais cela ne fonctionne pas, même si le markup est correct, et les règles CSS sont correctement frappées: les icônes ne sont pas visibles.

une idée de pourquoi?

Ici est lié d' jsbin

EDIT

j'ai trouvé cette alternative à l'insertion d'images: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);

ce Qui est exactement ce que je veux faire, mais il ne fonctionne pas avec <i> éléments utilisés par FontAwesome.

46
demandé sur dangonfast 2013-08-24 12:58:18

6 réponses

vous devez utiliser la bonne Unicode à l'intérieur d'un élément de texte normal, puis Définir LA font-family à "FontAwesome" comme ceci:

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

ce code exact affichera une icône" icône-Sourire". Les unicodes pour toutes les icônes de FontAwesome peuvent être trouvées ici:

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

soyez conscient que vous avez besoin d'adapter les codes dans le cheatsheet du format unicode HTML/CSS au format unicode Javascript pour que &#xf118; doit être écrit.\uf118 dans votre javascript.

79
répondu Carles Andres 2013-10-15 15:23:01

merci à tous ceux qui ont répondu. Ma solution finale est basée sur la réponse de 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]; });

attention avec votre CSS: Il a priorité sur les attributs SVG.

Et c'est la façon dont elle regarde:

Node Graph

La bonne chose à ce sujet, par rapport à l' foreignObject solution, est que les événements sont correctement gérés par D3.

32
répondu dangonfast 2017-06-08 07:50:48

je suis vraiment nouveau à d3, mais font awesome fonctionne en stylisant un <i> élément avec un attribut de classe.

Le seul moyen que j'ai trouvé est d'ajouter un foreignObject et mettre sur elle le HTML pertinent nécessaire par font awesome.

Référence:

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/

Code:

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

Démo: http://jsbin.com/eFAZABe/3/

5
répondu Irvin Dominin 2013-08-24 09:35:38

je sais que cette question est ancienne, été résolu, mais cela a fonctionné pour moi aujourd'hui.

ce site

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

Mais pour mon tableau, j'ai laissé tomber l'ajouter xhtml:body, sinon il ne me laisserait pas mettre x et y coords.

L'élément d'adopter la largeur et la hauteur de la police que vous avez défini.

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>')
3
répondu JasTonAChair 2016-04-21 03:41:56

juste pour mettre dans le code ici ce qui a fonctionné pour moi basé sur la réponse de CarlesAndres et le commentaire 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' });
2
répondu Jason 2017-05-24 13:27:01

étant donné que les autres réponses ne fonctionnent plus (parce que d3js a été mis à jour dans l'intervalle) et parce que c'est une bonne solution d'utiliser svg:foreignObject en raison de problèmes de compatibilité, voici une réponse qui fonctionne sans avoir à utiliser tous les hacks:

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

voici un exemple de travail (cliquez sur "Exécuter le code snippet" et le code d3 affiche trois étoiles):

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="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
0
répondu Jean-Paul 2018-09-16 16:11:07