带有矩形标签的圆环图

Question

我想用D3.js创建一个圆环图。我用它作为参考http://www.adeveloperdiary.com/d3-js/create-a-simple-donut-chart-using-d3-js/。

我想将标签放在一个矩形框中，如下图所示。

这是小提琴https://jsfiddle.net/YameenYasin/3swhuq40/6/

<div class="widget">
    <div id="chart" class="chart-container">

    </div>
</div>

body {
    background-color: #1B1F2A;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    height: 100%;
}

.widget {
    margin: 0 auto;
    width:350px;
    margin-top:50px;
    background-color: #222D3A;
    border-radius: 5px;
    box-shadow: 0px 0px 1px 0px #06060d;

}

.chart-container{
    padding:25px;
}

.shadow {
    -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
    filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
}

var dataset = [
        { name: 'IE', percent: 39.10 },
        { name: 'Chrome', percent: 32.51 },
        { name: 'Safari', percent: 13.68 },
        { name: 'Firefox', percent: 8.71 },
        { name: 'Others', percent: 6.01 }
    ];

    var pie=d3.layout.pie()
            .value(function(d){return d.percent})
            .sort(null);

    var w=300,h=300;

    var outerRadius=w/2;
    var innerRadius=100;

    var color = d3.scale.category10();

    var arc=d3.svg.arc()
            .outerRadius(outerRadius)
            .innerRadius(innerRadius);

    var svg=d3.select("#chart")
            .append("svg")
            .attr({
                width:w,
                height:h,
                class:'shadow'
            }).append('g')
            .attr({
                transform:'translate('+w/2+','+h/2+')'
            });
    var path=svg.selectAll('path')
            .data(pie(dataset))
            .enter()
            .append('path')
            .attr({
                d:arc,
                fill:function(d,i){
                    return color(d.data.name);
                }
            });

    path.transition()
            .duration(1000)
            .attrTween('d', function(d) {
                var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d);
                return function(t) {
                    return arc(interpolate(t));
                };
            });


    var restOfTheData=function(){
        var text=svg.selectAll('text')
                .data(pie(dataset))
                .enter()
                .append("text")
                .transition()
                .duration(200)
                .attr("transform", function (d) {
                    return "translate(" + arc.centroid(d) + ")";
                })
                .attr("dy", ".4em")
                .attr("text-anchor", "middle")
                .text(function(d){
                    return d.data.percent+"%";
                })
                .style({
                    fill:'#fff',
                    'font-size':'10px'
                });
    };

    setTimeout(restOfTheData,1000);