質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

5231閲覧

D3によるグラフのノードに画像を使う

kkkmokotan

総合スコア45

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/09/17 10:18

編集2016/09/17 18:00

こちらのサイトを用いて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のコードを参考にすべてのコードを直しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/09/17 17:54 編集

回答が付いた質問の編集は慎重に行ってください。タイプミス程度なら修正する事もありますが、本文まで置き換えるのはやめましょう。画面右上の「2016/09/18 02:50 編集」というボタンを押すと編集履歴を見れます。そこから過去の投稿を確認できるので、それを使って記事を復元してください。また、何かしらの解決が出来たなら、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
guest

回答1

0

ベストアンサー

"images//dwelling1.svg"https://placehold.jp/24/cc9999/993333/350x150.png などフルパスに変えてみてください。下記ページではURLを指定しているので・・・。

【D3.js サンプル orgoShmorgo を読んでソーシャルグラフを考えるの巻き – その四】
https://weblog.sugoiyo.com/2015/06/13/d3-js-サンプル-orgoshmorgo-を読んでソーシャルグラフを考え-4/

投稿2016/09/17 10:25

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kkkmokotan

2016/09/17 10:40

解答ありがとうございます。 編集したのですが今度は画像も円もテキストも出なくなってしまいました。リンクだけできている状態です。引き続き調べてみます。 参考サイトありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問