Этикетки с круговой диаграммой с D3.js и AngularJS

Question

Я новичок в D3. Попытка показать «внешние» ярлыки с линиями, в D3, похожа на круговую диаграмму Бостока здесь http://bl.ocks.org/dbuezas/9306799 Я не могу получить ярлыки или строки, чтобы показать, как пирог Бостока. Тем не менее, пирог работает! Любая помощь с моим кодом, главным образом директивой, будет оценена!

HTML:

<div ng-controller="myControl"> 
    <d3-pie-dir data="d3Data"></d3-pie-dir> 
</div> 

CSS:

path.slice{ 
    stroke-width:2px; 
} 

polyline{ 
    opacity: .3; 
    stroke: black; 
    stroke-width: 2px; 
    fill: none; 
} 

Контроллер:

inAng.controller('myControl', function ($scope, $http) { 
    var stack = []; 
$http.get("/getAPIData"). 
    success(function (data, status, headers, config) { 

    // formatting for easier D3 consumption 
     for(var i in data) 
     stack.push(data [i]); 

    $scope.d3Data = stack; 
    // looks something like $scope.d3Data = [{ name: 'Bill', score: 25}, { name: 'Pete', score: 50}] 
    }). 
    error(function (data, status, headers, config) { 
     $scope.stack = 'Error!'; 
    }); 

}); 

И проблема заключается в директиве:

inAng.directive('d3PieDir', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      data: '=' 
     }, 
     link: function (scope, element, attrs) { 
      scope.$watch('data', function(values) { 
       if(values) { 
        console.log('values from directive: ', values);     

        var width = 960, 
        height = 500, 
        radius = Math.min(width, height)/2; 

        var color = d3.scale.ordinal() 
         .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

        var arc = d3.svg.arc() 
         .outerRadius(radius - 10) 
         .innerRadius(0); 

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

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


         values.forEach(function(d) { 
          d.score = +d.score; 
         }); 

         var g = svg.selectAll(".arc") 
          .data(pie(values)) 
          .enter().append("g") 
          .attr("class", "arc"); 

         g.append("path") 
          .attr("d", arc) 
          .style("fill", function(d) { return color(d.data.name); }); 

// **** Below is where it stops working! **** 

var key = function(d){ return d.data.name; };       


/* ------- PIE SLICES -------*/ 
var slice = svg.select(".slices").selectAll("path.slice") 
    .data(pie(values), key); 

slice.enter() 
    .insert("path") 
    .style("fill", function(d) { return color(d.data.name); }) 
    .attr("class", "slice"); 

slice  
    .transition().duration(1000) 
    .attrTween("d", function(d) { 
     this._current = this._current || d; 
     var interpolate = d3.interpolate(this._current, d); 
     this._current = interpolate(0); 
     return function(t) { 
      return arc(interpolate(t)); 
     }; 
    }) 

slice.exit() 
    .remove(); 

/* ------- TEXT LABELS -------*/ 

var text = svg.select(".labels").selectAll("text") 
    .data(pie(values), key); 

text.enter() 
    .append("text") 
    .attr("dy", ".35em") 
    .text(function(d) { 
     return d.data.name; 
    }); 

function midAngle(d){ 
    return d.startAngle + (d.endAngle - d.startAngle)/2; 
} 

text.transition().duration(1000) 
    .attrTween("transform", function(d) { 
     this._current = this._current || d; 
     var interpolate = d3.interpolate(this._current, d); 
     this._current = interpolate(0); 
     return function(t) { 
      var d2 = interpolate(t); 
      var pos = outerArc.centroid(d2); 
      pos[0] = radius * (midAngle(d2) < Math.PI ? 1 : -1); 
      return "translate("+ pos +")"; 
     }; 
    }) 
    .styleTween("text-anchor", function(d){ 
     this._current = this._current || d; 
     var interpolate = d3.interpolate(this._current, d); 
     this._current = interpolate(0); 
     return function(t) { 
      var d2 = interpolate(t); 
      return midAngle(d2) < Math.PI ? "start":"end"; 
     }; 
    }); 

text.exit() 
    .remove(); 

/* ------- SLICE TO TEXT POLYLINES -------*/ 

var polyline = svg.select(".lines").selectAll("polyline") 
    .data(pie(values), key); 

polyline.enter() 
    .append("polyline"); 

polyline.transition().duration(1000) 
    .attrTween("points", function(d){ 
     this._current = this._current || d; 
     var interpolate = d3.interpolate(this._current, d); 
     this._current = interpolate(0); 
     return function(t) { 
      var d2 = interpolate(t); 
      var pos = outerArc.centroid(d2); 
      pos[0] = radius * 0.95 * (midAngle(d2) < Math.PI ? 1 : -1); 
      return [arc.centroid(d2), outerArc.centroid(d2), pos]; 
     };   
    }); 

polyline.exit() 
    .remove(); 

       } 
      })} 

}}); 

Answer 1

У вас есть две проблемы, первая из них, что вы забыли добавить эти элементы к вашему SVG

svg.append("g") 
    .attr("class", "slices"); 
svg.append("g") 
    .attr("class", "labels"); 
svg.append("g") 
    .attr("class", "lines"); 

они являются г элементы, d3 Рисует и этикетки на, так что вы должны поместить их после

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

,, второй вопрос в том, что вы забыли определить внешнюю дугу ,,

var outerArc = d3.svg.arc() 
    .innerRadius(radius * 0.9) 
    .outerRadius(radius * 0.9); 

, которые вы используете в ваш расчет для создания линий