Q&Aillustratorで作成したインラインSVGを、
D3.jsで扱いたいと考えています。
https://toshiha.blogspot.com/2013/12/d3jssvg-element.html
上記のページを参考に、次のようなコードを記述しているのですが、
うまく動きません。
html
1<body> 2 <!-- SVG element template --> 3<svg id="svg_templates" > 4 <g class="instance_small device_body"> 5 <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 6 </g> 7</svg> 8</body>
js
1var svg = d3.select('svg') 2var device = svg.selectAll('g.device'); 3device.enter() 4 .append("g") 5 .attr('class','device') 6 .each(function(d, i){ 7 this.appendChild( 8 d3.select('#svg_map > .instance_small').node().cloneNode(true) 9 ); 10 });
実際に表示させるSVGはもっと複雑なコンテンツであるため、
なんとか既存のSVGを使用したいです。
どこを修正すれば良いのでしょうか…。
何卒よろしくお願いいたします。
回答1件
0
自己解決
D3.jsを使用したかったのはSVGのパンやズームを行いたかったためでしたが、
今回はhtmlにsvgをべた書きし、svg-pan-zoomを使用することで解決しました。
ありがとうございました。
投稿2020/01/22 04:20
総合スコア25
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。