각도 d3 도넛

Question

d3을 사용하여 도넛 형 차트를 만들려고하지만 각도가 맞지 않습니다. 모든 d3 코드를 기능 링크에 추가해야합니까, 아니면 다른 방법이 있습니까? 더욱이 나는이 차트를 역동적으로 보이기를 원한다. 입니다 링크는 사용을 환영

var data = [{ 
    name: "one", 
    value: 75 
}, { 
    name: "two", 
    value: 25 
}, ]; 

var width = 100; 
    height = width; 

var chart = d3.select("#circle-4") 
    .append('svg') 
    .attr("width", width) 
    .attr("height", height) 
    .append("gh") 
    .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")"); 


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

var arc = d3.svg.arc() 
    .outerRadius(radius/2) 
    .innerRadius(radius - 15); 

var pie = d3.layout.pie() 
    .sort(null) 
    .startAngle(0) 
    .endAngle(2 * Math.PI) 
    .value(function (d) { 
    return d.value; 
}); 

var color = d3.scale.ordinal() 
    .range(["#3399FF", "#e1e1e1"]); 

var gh = chart.selectAll(".arc") 
    .data(pie(data)) 
    .enter().append("gh") 
    .attr("class", "arc"); 

gh.append("path") 
    .attr("fill", function (d, i) { 
    return color(i); 
}) 
    .transition() 
    .ease("exp") 
    .duration(1000) 
    .attrTween("d", dpie); 

function dpie(b) { 
    var i = d3.interpolate({ 
     startAngle: 0, 
     endAngle: 1 * Math.PI 
    }, b); 
    return function (t) { 
     return arc(i(t)); 
    }; 
} 

Answer 1

예

이

angular.module('d3onut',[]) 
    .directive('donut', function(){ 
     function link(scope, elements, attr){ 
     var data = scope.data; 
     }; 
     return { 
      restrict: EA, 
      replace: true, 
      link : link, 
      scope: { data '='} 

     } 
    }) 

이것은 D3 코드, 그것은 대부분 작동하지만, 그것은 더 나은 제작에 도움이 : 여기

내 지시 코드입니다 벌금. $ scope를 사용하여 범위의 변경 사항을 감시합니다. 이것은 좋은 튜토리얼입니다.

http://www.ng-newsletter.com/posts/d3-on-angular.html