こちらのサイトを用いてD3風にグラフをレイアウトしていたのですがどこか物足りなかったのでノードのまん丸の代わりに画像を使いたく思いこちらのサイトを参考に.append を使って編集しました。
編集後のソースコードを以下に載せます。
javascript
1 var link = svg.selectAll('.link') 2 .data(graph.links).enter() 3 .append('line') 4 .attr('class', 'link') 5 .style('stroke-width', 1) 6 .style('marker-end', 'url(#arrow)'); 7 var node = svg.selectAll('.node') 8 .data(graph.nodes).enter() 9 .append('g') 10 .attr('class', 'node') 11 .call(force.drag); 12//circle のappendを'image'にしてattrにサイトを参考に記述 13 var circle = node.append('image') 14 .attr({"xlink:href":"images//dwelling1.svg", 15 "width":75, 16 "height":60 17 }); 18 var text = node.append('text') 19 .attr('dx', 10) 20 .attr('dy', '.35em') 21 .text(function(d) { return d.name; }) 22 .style('stroke', 'gray'); 23 force.on('tick', function() { 24 link.attr('x1', function(d) { return d.source.x; }) 25 .attr('y1', function(d) { return d.source.y; }) 26 .attr('x2', function(d) { return d.target.x; }) 27 .attr('y2', function(d) { return d.target.y; }); 28 circle.attr('cx', function(d) { return d.x; }) 29 .attr('cy', function(d) { return d.y; }); 30 text.attr('x', function(d) { return d.x; }) 31 .attr('y', function(d) { return d.y; }); 32 });
としてみました。しかしなにも表示されません。。。
追記
回答者様 申し訳ありません。回答者様のリンクを参考にして画像の編集も行ったのでベストアンサーとさせていただきました。
解決策としてはlabeled force layoutのコードを参考にすべてのコードを直しました。
回答1件
あなたの回答
tips
プレビュー