Javascript 将URL添加到饼图的文本中
我有一个多层饼图 部分代码如下所示:Javascript 将URL添加到饼图的文本中,javascript,d3.js,pie-chart,Javascript,D3.js,Pie Chart,我有一个多层饼图 部分代码如下所示: var color = d3.scale.ordinal() .range(["cyan", "green", "blue", "brown", "violet", "orange", "purple"]); var arcMajor = d3.svg.arc() .outerRadius(function (d) { return radius - 20; })
var color = d3.scale.ordinal()
.range(["cyan", "green", "blue", "brown", "violet", "orange", "purple"]);
var arcMajor = d3.svg.arc()
.outerRadius(function (d) {
return radius - 20;
})
.innerRadius(0);
var arcOver = d3.svg.arc()
.outerRadius(radius + 9);
//this for making the minor arc
var arcMinor = d3.svg.arc()
.outerRadius(function (d) {
// scale for calculating the radius range([20, radius - 40])
var s = scale((d.data.major - d.data.minor));
if (s > radius - 20) {
return radius - 20;
}
return scale(d.data.major - d.data.minor);
})
.innerRadius(0);
var arcOverMin = d3.svg.arc()
.outerRadius(radius - 90 );
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var labelr = 260;
var pie = d3.layout.pie()
.sort(null)
.value(function (d) {
return d.major;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 1.95+ ")");
data = [{
major: 500,
minor: 250,
grp: 1,
URL:'http://google.com'
}, {
major: 300,
minor: 200,
grp: 2,
URL:'http://www.bing.com'
}, {
major: 100,
minor: 100,
grp: 3,
URL:'http://www.facebook.com'
}, {
major: 150,
minor: 100,
grp: 4,
URL:'http://www.stackoverflow.com'
}, {
major: 100,
minor: 100,
grp: 5,
URL:'http://www.stackexchange.com'
}];
看起来像
我无法添加URL以显示在饼图周围所示的彩色数字上
我该怎么做
非常感谢。像这样向文本DOM添加一个单击侦听器,然后在新浏览器中打开它
.text(function (d, i) { return d.value.toFixed(2); })
.on("click", function(d){
var win = window.open(d.data.URL, '_blank');
win.focus();
});
工作代码
希望这有帮助 你是说你需要url而不是数字?数字应该在那个里,但当点击数字时,我应该指向url。