web-dev-qa-db-fra.com

Ajout d'icônes Font Awesome à un graphique D3

J'essaie de définir une icône avec FontAwesome au lieu du texte dans mes nœuds D3. Voici l'implémentation d'origine, 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'essaye 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 balisage est correct et que les règles CSS sont correctement activées: les icônes ne sont pas visibles.

Une idée pourquoi?

Voici la relation jsbin

MODIFIER

J'ai trouvé cette alternative pour insérer des 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);

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

javascriptd3.jsfont-awesome
50
dangonfast

Vous devez utiliser le bon Unicode dans un élément de texte normal, puis définir la famille de polices sur "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 rendra une icône "icône-sourire". Les unicodes de toutes les icônes FontAwesome se trouvent ici:

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

Sachez que vous devez adapter les codes de la triche du format HTML/CSS unicode au format Javascript unicode afin que &#xf118; doit être écrit \uf118 dans votre javascript.

81
Carles Andres

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

Soyez prudent avec votre CSS: il a priorité sur les attributs SVG.

Et voici à quoi cela ressemble:

Node Graph

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

32
dangonfast

Je suis vraiment nouveau sur d3, mais les polices géniales fonctionnent en stylisant un <i> élément avec un attribut de classe.

La seule façon que j'ai trouvée est d'ajouter un foreignObject et d'y mettre le code HTML nécessaire dont la police a besoin.

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/

7
Irvin Dominin

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

De 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 graphique, j'ai laissé tomber l'appendice xhtml:body, sinon cela ne me laisserait pas définir les coordonnées x et y.

L'élément adoptera la largeur et la hauteur de la police que vous définissez.

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
JasTonAChair

Étant donné que les autres réponses ne fonctionnent plus (car d3js a été mis à jour entre-temps) et parce que c'est pas a bonne solution à utiliser svg:foreignObject en raison de problèmes de compatibilité, voici une réponse qui fonctionne sans avoir à utiliser de 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 l'extrait de code" 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>
3
Jean-Paul

Juste pour mettre en 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
Jason