動態加載角d3甜甜圈

Question

我創建了一個簡單的Angular/D3甜甜圈圖表。

Plunker：http://plnkr.co/edit/NyH1udkjBj3zymhGaThZ?p=preview

但是我希望圖表對頁面加載的動畫。在這方面，我的意思是，我想填充（藍色區域）的過渡

Somethign類似：http://codepen.io/tpalmer/pen/jqlFG/

HTML：

<div ng-app="app" ng-controller="Ctrl"> 
    <d3-donut radius="radius" percent="percent" text="text"></d3-donut> 
div> 

JS：

var app = angular.module('app', []); 
app.directive('d3Donut', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     radius: '=', 
     percent: '=', 
     text: '=', 
    }, 
    link: function(scope, element, attrs) { 

     var radius = scope.radius; 
     var percent = scope.percent; 
     var text = scope.text; 

     var svg = d3.select(element[0]) 
     .append('svg') 
     .style('width', radius/2 + 'px') 
     .style('height', radius/2 + 'px'); 

     var donutScale = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]); 
     var color = "#5599aa"; 
     var data = [ 
     [0, 100, "#e2e2e2"], 
     [0, percent, color] 
     ]; 

     var arc = d3.svg.arc() 
     .innerRadius(radius/6) 
     .outerRadius(radius/4) 
     .startAngle(function(d) { 
      return donutScale(d[0]); 
     }) 
     .endAngle(function(d) { 
      return donutScale(d[1]); 
     }); 

     svg.selectAll("path") 
     .data(data) 
     .enter() 
     .append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { 
      return d[2]; 
     }) 
     .attr("transform", "translate(" + radius/4 + "," + radius/4 + ")"); 

     svg.append("text") 
     .attr("x", radius/4) 
     .attr("y", radius/4) 
     .attr("dy", ".35em") 
     .attr("text-anchor", "middle") 
     .attr("font-size", "12px") 
     .style("fill", "#333") 
     .attr("text-anchor", "middle") 
     .text(text); 
    } 
    }; 
}); 

function Ctrl($scope) { 
    $scope.radius = 200; 
    $scope.percent = 50; 
    $scope.text = "40%"; 
} 

Answer 1

我已經將您的代碼與您引用的代碼結合起來作爲示例。這是一個工作PLUNK。

有兩兩件事值得一提 - 1.使用attrTween：

.attrTween("d", function (a) { 
    var i = d3.interpolate(this._current, a); 
    var i2 = d3.interpolate(progress, percent) 
    this._current = i(0); 
    console.log(this._current); 
    return function(t) { 
     text.text(format(i2(t)/100)); 
     return arc(i(t)); 
    }; 
}); 

2.更新數據：

data = [ 
    [0,100,"#e2e2e2"], 
    [0,percent,color] 
]; 

我不喜歡一個更地道使用的其他一些不太重要的變化控制器片段等，但以上是重要的。

Answer 2

Angular的「運行」命令會在這裏幫助嗎？

angular.module('app', []).run(myfunction($rootScope)) 

此頁面上看到「運行」 https://docs.angularjs.org/api/ng/type/angular.Module 「的run（）」會給你只一次性某某這樣的功能的執行一次AngularJs已自舉。