web-dev-qa-db-ja.com

FontAwesomeアイコンをD3グラフに追加する

D3ノードのテキストの代わりに FontAwesome でアイコンを設定しようとしています。これは元の実装で、テキストがあります：

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

そして今、私はアイコンを試してみます：

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

しかし、マークアップが正しく、CSSルールが適切にヒットしても、これは機能しません。アイコンは表示されません。

理由は何ですか？

関連する jsbin

編集

画像を挿入するこの代替手段を見つけました： 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);

これはまさに私がやりたいことですが、FontAwesomeで使用される<i>要素では機能しません。

javascriptd3.jsfont-awesome
50
dangonfast

通常のテキスト要素内で適切なUnicodeを使用し、次にfont-familyを次のように「FontAwesome」に設定する必要があります。

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

この正確なコードは、「アイコンスマイル」アイコンをレンダリングします。すべてのFontAwesomeアイコンのユニコードは次の場所にあります。

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

チートシート内のコードをHTML/CSSユニコード形式からJavascriptユニコード形式に適合させて、&#xf118;を書く必要があります\uf118あなたのjavascriptで。

81
Carles Andres

答えてくれてありがとう。私の最終的な解決策は、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]; });

CSSには注意してください。SVG属性よりも優先されます。

そして、これはそれが見える方法です：

Node Graph

foreignObjectソリューションと比較して、このことの良い点は、イベントがD3によって適切に処理されることです。

32
dangonfast

私は本当にd3に慣れていませんが、<i>要素をクラス属性でスタイリングすることで、素晴らしいフォントが機能します。

私が見つけた唯一の方法は、foreignObjectを追加し、それにawesomeフォントに必要な関連HTMLを設定することです。

参照：

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/

コード：

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

デモ： http://jsbin.com/eFAZABe/3/

7
Irvin Dominin

この質問は古く、解決されていることは知っていますが、これは今日私にとってはうまくいきました。

このサイト から

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

しかし、私のチャートでは、アペンドを削除しましたxhtml:body、それ以外の場合は、xおよびy座標を設定できません。

要素は、設定したフォントの幅と高さを採用します。

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

他の答えがもう機能しないことを考えると（d3jsはその間に更新されているため）、それはnot a互換性の問題のためsvg:foreignObjectを使用する良い解決策は、ハックを使用せずに機能する答えです。

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

これが実際の例です（[コードスニペットを実行]をクリックすると、d3コードは3つの星を出力します）。

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

CarlesAndresの答えと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