D3.js - SVGにLinearIconを追加

私はこのウェブサイトからアイコンを追加する方法に苦しんでいます - https://linearicons.com/をd3.js.D3.js - SVGにLinearIconを追加

現在のところ、サイズと色を指定する方法を考えていないのに、私は自分自身でsvgをダウンロードしています。

my_svg.append("image") 
     .attr("class",'apart') 
     .attr("x", 10) 
     .attr("y", 10) 
     .attr("xlink:href","apartment.svg");

これらの行には何の効果もありません：私は、シンボルタグをも埋め込むことができ

<svg class="lnr lnr-user"><use xlink:href="#lnr-user"></use></svg>

：

 .attr("fill","red") 
    .attr("width", 40) 
    .attr("height", 40)

は、理想的には私はとインラインSVGを複製したいが、それをうまくすることはできませんもう一度正しく参照する方法はありません。私は動的に... SVGなどを作成する必要があるように私には適用されません。ここで働く例があります：

D3 - Add a raw symbol

感謝すべてのヘルプは。

出典

2017-02-04 Bmil

フォントのバージョン

私はfont itselfを使用する代わりに、フォントのsvgバージョンを使用することはありません。そして、鍵はたとえばhomeのために、そのCSSファイルで見て、あなたがしたいアイコンのUnicode文字を取得することです：

.lnr-home:before { 
    content: "\e800"; 
}

はUnicode文字です：

\ue800

あなたはその後、標準を使用することができますtext要素。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.css" /> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var svg = d3.select("body") 
 
     .append("svg") 
 
     .attr("width", 500) 
 
     .attr("height", 500); 
 
     
 
    svg.selectAll('text') 
 
     .data(["\ue810", "\ue80e", "\ue854", "\ue884"]) 
 
     .enter() 
 
     .append('text') 
 
     .attr('font-family', 'Linearicons-Free') 
 
     .attr('font-size', '2em') 
 
     .text(function(d) { return d }) 
 
     .attr('transform', function(d,i){ return 'translate(' + [(i * 50) + 50, (i * 50) + 50] + ')'; }); 
 
    </script> 
 
</body> 
 

 
</html>

SVGバージョン

01：コードを実行

.append('text') 
.attr('font-family', 'Linearicons-Free') 
.attr('font-size', '2em') 
.text('\ue800')

：d3構文で

svgバージョンを使用して心を動かしても、動作させることはできますが、ちょっとしたことです。まず、あなたがsvgembedderのためにあなたのページ上の既存の<use>を持っている必要があり、その後はuse要素を追加することができます：私はそれを割れてきました

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
    <script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.js"></script> 
 
</head> 
 

 
<body> 
 
    <!-- this needs to be here for svgemedder to work --> 
 
    <svg width="0" height="0"><use xlink:href="#dummy"></use></svg> 
 
    <script> 
 
    var svg = d3.select("body") 
 
     .append("svg") 
 
     .attr("width", 500) 
 
     .attr("height", 500); 
 
     
 
    svg.selectAll('.icon') 
 
     .data(["user", "home", "thumbs-up", "cross"]) 
 
     .enter() 
 
     .append('use') 
 
     .attr('width',50) 
 
     .attr('height',50) 
 
     .attr('transform', function(d,i){ return 'translate(' + [(i * 50) + 50, (i * 50) + 50] + ')'; }) 
 
     .attr('xlink:href', function(d) { return '#lnr-' + d }); 
 
    </script> 
 
</body> 
 

 
</html>

出典

2017-02-04 17:10:57 Mark

コメントMarkに感謝します。私は、下の「clunky」アプローチを試しましたが、あなたのテキストアプローチに移行します。あなたが言うように、それはよりエレガントです！ – Bmil

：

my_svg.append('use') 
    .attr("xlink:href","#lnr-user") 
    .attr("x", width-icon_pos) 
    .attr("y", 10) 
    .attr("width", 20) 
    .attr("height", 20) 
    .attr("fill","red”);

どのインデックスファイルのスクリプト参照が次のようになっている限り、扱いになります。

<script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script>

出典

2017-02-04 18:29:10 Bmil

D3.js - SVGにLinearIconを追加

答えて

関連する問題