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 }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/01 09:32
2019/02/01 09:44