将 URL 添加到饼图的文本

Question

我有一个多层饼图fiddle。

部分代码在这里：

    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.whosebug.com'
    }, {
        major: 100,
        minor: 100,
        grp: 5,
        URL:'http://www.stackexchange.com'
    }];

看起来像

我无法添加显示在饼图周围指示的彩色数字上的 URL。

我该怎么做？

非常感谢。

Answer 1

像这样给文本DOM添加一个点击监听器，然后在新浏览器中打开它。

.text(function (d, i) { return d.value.toFixed(2); })
        .on("click", function(d){
        var win = window.open(d.data.URL, '_blank');
        win.focus();
    });

工作代码here

希望对您有所帮助！

将 URL 添加到饼图的文本

Adding URLs to the text of the pie chart

javascript

d3.js

pie-chart