在圆环图中添加带箭头的文本

时间:2013-12-02 14:28:54

标签: javascript d3.js

我已经用中心文字获得了甜甜圈图。 现在我需要我在圆圈之外的文本,如图中的(未解析和解析的值)与该中心箭头。我怎么能做到这一点?感谢

段:

   var dataset = {
   Unresolved: [3],
   Resolved:[7] 
     };
   var total=parseInt(dataset.Resolved)+parseInt(dataset.Unresolved);

    var keyValue=[];
    for(key in dataset){
        keyValue.push(key); 
      }

       var width = 260,
          height = 300,
          radius = Math.min(width, height) / 2;

          var color = ["#9F134C", "#ccc"];

     var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc()
.innerRadius(radius - 90)
.outerRadius(radius - 80);

    var svg = d3.select("body").append("svg")
       .attr("width", width)
       .attr("height", height)
       .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

     var gs = svg.selectAll("g").data(pie(d3.values(dataset))).enter().append("g");

       var path = gs.append("path")
          .attr("fill", function(d, i) { return color[i]; })
          .attr("d", arc);


         var pieLabel = svg.append("svg:text")
        .attr("dy", ".35em")
          .attr("text-anchor", "middle")
        .attr("font-size", "40px")
         .attr("fill", "#605e5f")
        .text(total); 

      var legendCircle =       d3.select("body").append("svg").selectAll("g").data(keyValue).enter().append("g")
                   .attr("class","legend")
                   .attr("width", radius)
                   .attr("height", radius * 2)
                   .attr("transform", function(d, i) {     return "translate(0," + i *  20 + ")"; });


     legendCircle.append("rect")
            .attr("width", 18)
           .attr("height", 10)
            .style("fill", function(d, i) { return color[i];});

legendCircle.append("text")
           .attr("x", 24)
            .attr("y", 5)
            .attr("dy", ".35em")
            .text(function(d) { return d; });

enter image description here

提前致谢。

0 个答案:

没有答案