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

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

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

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

Webサイト

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

JavaScript

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

Q&A

1回答

2658閲覧

D3グラフの各要素にリンクを追加したい

asagaooo

総合スコア10

D3.js

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

Webサイト

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

JavaScript

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

0グッド

0クリップ

投稿2019/02/01 07:05

編集2019/02/01 09:34

D3.jsで作成した円グラフの各要素にリンクを設定したいです。

こちらのサイトを参考にD3.jsで円グラフを作成し、各要素をクリックしたら設定したリンク先に飛ぶようにしたくてこちらのページを参考に試していたのですが、どこにリンクアクションを記述すればいいのかわかりませんでした。
以下は編集後のコードですが、こちらでは上手くいきませんでした。

該当のソースコード

html

1<div id="donut-chart"> 2<svg></svg> 3</div>

JavaScript

1 nv.addGraph(function() { 2 var donutChart = nv.models.pieChart() 3 .x(function(d) { 4 return d.label 5 }) 6 .y(function(d) { 7 return d.value 8 }) 9 .showLabels(true) 10 .showLegend(false) 11 .labelThreshold(.05) 12 .labelType("key") 13 .color(["#6cbe49", "#f7b31c", "#e74635"]) 14 .tooltipContent( 15 function(key, y, e, graph) { 16 return 'Custom tooltip string' 17 } 18 ) 19 .tooltips(false) 20 .donut(true) 21 .donutRatio(0.15); 22 23 d3.select("#donut-chart svg") 24 .datum(seedData()) 25 .transition().duration(300) 26 .call(donutChart) 27 .call(pieSlice()); 28 29    // リンクアクションの追加部分           30 var g = svg.selectAll("#donut-chart svg") 31 .on("click", function(d, i) { 32 window.location = seedData[i].link; 33 }); 34 35 return donutChart; 36 }); 37 38 function seedData() { 39 return [{ 40 "label": "test1", 41 "value": 35, 42 "link": "https://teratail.com/questions/172108" 43 }, 44 { 45 "label": "test2", 46 "value": 40, 47 "link": "https://teratail.com/questions/172108" 48 }, 49 { 50 "label": "test3", 51 "value": 100, 52 "link": "https://teratail.com/questions/172108" 53 }, 54 ]; 55 }

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

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

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

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

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

guest

回答1

0

"link": "#"の#のかわりにURLをかくだけでは?

投稿2019/02/01 07:17

papinianus

総合スコア12705

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

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

asagaooo

2019/02/01 09:32

#はURLの代わりに代入していただけで、実際にこちらにURLを入力しても反応はなく、うまくいきませんでした。 言葉が足らず申し訳ありません。
papinianus

2019/02/01 09:44

提示コードでは動作再現までもってけないんで、何とも。 devtoolにエラーないですかね?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問