將靜態代碼轉換爲可重複使用的D3.js餅圖動畫

Question

我試圖用Travis Palmer重新制作一支筆（http://codepen.io/anon/pen/JgyCz），以便我可以在多個元素上使用它。我們正試圖在頁面上放置幾個<div class="donut" data-donut="x">。

因此，這將類似於HTML如下：

////// HTML 

<div class="donut" data-donut="22"></div> 

<div class="donut" data-donut="48"></div> 

<div class="donut" data-donut="75></div> 

我想轉換爲可重複使用的compunent的D3.js/jQuery的例子如下。 （要查看完整的工作示例去這個鏈接 - http://codepen.io/anon/pen/JgyCz）

////// D3.js 

var duration = 500, 
    transition = 200; 

drawDonutChart(
    '.donut', 
    $('.donut').data('donut'), 
    290, 
    290, 
    ".35em" 
); 

function drawDonutChart(element, percent, width, height, text_y) { 
    width = typeof width !== 'undefined' ? width : 290; 
    height = typeof height !== 'undefined' ? height : 290; 
    text_y = typeof text_y !== 'undefined' ? text_y : "-.10em"; 

    var dataset = { 
     lower: calcPercent(0), 
     upper: calcPercent(percent) 
     }, 
     radius = Math.min(width, height)/2, 
     pie = d3.layout.pie().sort(null), 
     format = d3.format(".0%"); 

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

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

    var path = svg.selectAll("path") 
     .data(pie(dataset.lower)) 
     .enter().append("path") 
     .attr("class", function(d, i) { return "color" + i }) 
     .attr("d", arc) 
     .each(function(d) { this._current = d; }); // store the initial values 

    var text = svg.append("text") 
     .attr("text-anchor", "middle") 
     .attr("dy", text_y); 

    if (typeof(percent) === "string") { 
    text.text(percent); 
    } 
    else { 
    var progress = 0; 
    var timeout = setTimeout(function() { 
     clearTimeout(timeout); 
     path = path.data(pie(dataset.upper)); // update the data 
     path.transition().duration(duration).attrTween("d", function (a) { 
     // Store the displayed angles in _current. 
     // Then, interpolate from _current to the new angles. 
     // During the transition, _current is updated in-place by d3.interpolate. 
     var i = d3.interpolate(this._current, a); 
     var i2 = d3.interpolate(progress, percent) 
     this._current = i(0); 
     return function(t) { 
      text.text(format(i2(t)/100)); 
      return arc(i(t)); 
     }; 
     }); // redraw the arcs 
    }, 200); 
    } 
}; 

function calcPercent(percent) { 
    return [percent, 100-percent]; 
}; 

Answer 1

好的，我想通了。我後來覺得有點笨，但我能說什麼，我是一個js n00b。你所要做的就是再調用一下drawDonutChart（）方法。總之：

drawDonutChart(
    '#donut1', 
    $('#donut1').data('donut'), 
    220, 
    220, 
    ".35em" 
); 

drawDonutChart(
    '#donut2', 
    $('#donut2').data('donut'), 
    120, 
    120, 
    ".35em" 
); 

drawDonutChart(
    '#donut3', 
    $('#donut3').data('donut'), 
    150, 
    150, 
    ".2em" 
); 

Answer 2

做到這一點，最好的方法是使用角指令。一個角度指令基本上將html包裝在一個自定義標籤中，讓你在多個頁面上或者多次在一個頁面上反覆添加指令。看到這段視頻：http://www.youtube.com/watch?v=aqHBLS_6gF8

還有一種被稱爲出含有可重複使用預置的角度指令nvd3.js庫：http://nvd3.org/

希望這有助於。