D3.jsで作成した円グラフにリンクを設定したい
javascript初心者です。D3.jsを使用して以下のように円グラフを作成しています。
こちらを参考にしました。
nv.addGraph(
function() {
var donutChart = nv.models.pieChart()
.x(function(d) {
return d.label;
})
.y(function(d) {
return d.value;
})
.showLabels(true)
.showLegend(false)
.labelThreshold(0.05)
.labelType("key")
.color(["#1967BF", "#CE190C", "#ED9212"])
.tooltipContent(
function(key, y, e, graph) {
return 'Custom tooltip string';
}
)
.tooltips(false)
.donut(true)
.donutRatio(0.15);
d3.select("#donut-chart svg")
.datum(seedData())
.transition().duration(300)
.call(donutChart)
.call(pieSlice());
return donutChart;
});
function seedData() {
return [{
"label": "Facebook",
"value": 15,
"link": "https://ja-jp.facebook.com/"
},
{
"label": "youtube",
"value": 102,
"link": "https://www.youtube.com/"
},
{
"label": "Instagram",
"value": 87,
"link": "https://www.instagram.com/"
},
];
}
【html】
<div id="donut-chart">
<svg></svg>
</div>
各項目をクリックしたらそれぞれ任意のリンク先に飛べるようにしたいです。
こちらを見つけて、"key" : "value"は入力してみたのですが、そこから先がわかりません。
参考URLの方はノードへのリンク付与のようで、そのまま同じ記述をしてみてもだめでした。