創建多個進度圈d3.js

Question

我期待創建多個進度圈。 （所以，從一個數據集中畫出3個圓）

我一直在嘗試適應this的例子，但正如你所看到的，我已經在某個地方嚴重錯了。

我採取的第一步是將所有數據更改爲數據，因爲我會希望選項動態處理數據。然後，我試圖簡化代碼，以便我更容易理解。 （我是一個D3新手！）

現在，我不知道發生了什麼，希望有人能幫助我達到最終結果？

這是一個fiddle和我的代碼;

/*global d3*/ 

var width = 240, 
    height = 125, 
    min = Math.min(width, height), 
    oRadius = min/2 * 0.8, 
    iRadius = min/2 * 0.85, 
    color = d3.scale.category20(); 

var arc = d3.svg.arc() 
    .outerRadius(oRadius) 
    .innerRadius(iRadius); 

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

var data = [ 
    [20], 
    [40], 
    [60] 
]; 

// draw and append the container 
var svg = d3.select("#chart").selectAll("svg") 
    .data(data) 
    .enter().append("svg") 
    .attr("width", width).attr("height", height); 
svg.append('g') 
    .attr('transform', 'translate(75,62.5)') 
    .append('text').attr('text-anchor', 'middle').text("asdasdasdas") 


// enter data and draw pie chart 
var path = svg.selectAll("path") 
    .data(pie) 
    .enter().append("path") 
    .attr("class", "piechart") 
    .attr("fill", function(d, i) { 
    return color(i); 
    }) 
    .attr("d", arc) 
    .each(function(d) { 
    this._current = d; 
    }) 

function render() { 
    // add transition to new path 
    svg.selectAll("path") 
    .data(pie) 
    .transition() 
    .duration(1000) 
    .attrTween("d", arcTween) 

    // add any new paths 
    svg.selectAll("path") 
    .data(pie) 
    .enter().append("path") 
    .attr("class", "piechart") 
    .attr("fill", function(d, i) { 
     return color(i); 
    }) 
    .attr("d", arc) 
    .each(function(d) { 
     this._current = d; 
    }) 

    // remove data not being used 
    svg.selectAll("path") 
    .data(pie).exit().remove(); 
} 

render(); 


function arcTween(a) { 
    var i = d3.interpolate(this._current, a); 
    this._current = i(0); 
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

謝謝大家！

Answer 1

您在繪製單獨圖表的位置出現問題。所有你需要做的就是添加一個翻譯到每一個，所以他們在他們的容器的中心。

添加此創建路徑後：

.attr('transform', 'translate(' + width/2 + ',' +height/2 + ')') 

width和height這裏有集裝箱的尺寸，這將每個圖表移動到其容器的中心。

更新小提琴：http://jsfiddle.net/thatOneGuy/dbrehvtz/2/

很明顯，你可能知道，如果你想更多的值添加到每個餡餅，只需編輯數據。例如：

var data = [ 
    [20, 100, 100, 56, 23, 20, 100, 100, 56, 23 ], 
    [40], 
    [60] 
]; 

新小提琴：http://jsfiddle.net/thatOneGuy/dbrehvtz/3/