d3.js類似標尺的圓弧初始化和轉換

Question

我希望得到您的幫助，建立一種'標準'，一個基於'圓弧'的圓，它將動態地填充一個從0到100的值（8個標距）。

我能夠得到這個工作（基於Arc時鐘的要點https://gist.github.com/mbostock/1098617），但現在我試圖強制在每次更新和開始時進行轉換。

我試圖實現以下流程：1. 拱加載 - 從0到100 - 100>到初始值 2.拱更新 - 從先前的值變爲0 - >從0到新值

似乎無法找到實現這個正確的方式...

值，目前正在插入隨機的（10個單位）

var w = 1500, 
    h = 300, 
    x = d3.scale.ordinal().domain(d3.range(8)).rangePoints([0, w], 2); 

var fields = [ 
    { name: "A", value: 100, previous: 0, size: 100 }, 
    { name: "B", value: 100, previous: 0, size: 100 }, 
    { name: "C", value: 100, previous: 0, size: 100 }, 
    { name: "D", value: 100, previous: 0, size: 100 }, 
    { name: "E", value: 100, previous: 0, size: 100 }, 
    { name: "F", value: 100, previous: 0, size: 100 }, 
    { name: "G", value: 100, previous: 0, size: 100 }, 
    { name: "H", value: 100, previous: 0, size: 100 } 
]; 

    var arc = d3.svg.arc() 
    .innerRadius(40) 
    .outerRadius(60) 
    .startAngle(0) 
    .endAngle(function (d) { return (d.value/d.size) * 2 * Math.PI; }); 

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

var path = svg.selectAll("path") 
     .data(fields.filter(function (d) { return d.value; }), function (d) { return d.name; }) 
     .enter().append("svg:path") 
     .attr("transform", function (d, i) { return "translate(" + x(i) + ",0)"; }) 
     .transition() 
     .ease("liniar") 
     .duration(750) 
     .attrTween("d", arcTween); 
setTimeout(function() { services() }, 750); 
setInterval(function() { services(); }, 5000); 

function services() { 
    for (var i = 0; i < fields.length; i++) { 
     fields[i].previous = fields[i].value; 
     fields[i].value = Math.floor((Math.random() * 100) + 1); 
    } 
    path = svg.selectAll("path").data(fields.filter(function (d) { return d.value; }), function (d) { return d.name; }); 


    path.transition() 
     .ease("linear") 
     .duration(1600) 
     .attrTween("d", arcTweenReversed); 

} 

function arcTween(b) { 

    var i = d3.interpolate({ value: b.previous }, b); 
    return function (t) { 
     return arc(i(t)); 
    }; 
} 

這裏的jsfiddle看直播：http://jsfiddle.net/p5xWZ/2/ 提前致謝！

Answer 1

類似下面的鏈條過渡能完成圓弧，然後返回到下一個值：

path.transition() 
     .ease("linear") 
     .duration(function(d, i) { return 1600 * ((d.size-d.value)/d.size); }) 
     .delay(function(d, i) { return i * 10; }) 
     .attrTween("d", completeArc) 
     .transition() 
     .ease("linear") 
     .duration(function(d, i) { return 1600 * (d.value/d.size); }) 
     .attrTween("d", resetArc) 
     .style("fill", function (d) { if (d.value < 100) { return "green"; } else { return "red" } }); 

凡完成圓弧達到100，並重置弧從0到下一個值：

function completeArc(b) { 
    // clone the data for the purposes of interpolation 
    var newb = $.extend({}, b); 
    // Set to 100 
    newb.value = newb.size; 
    var i = d3.interpolate({value: newb.previous}, newb);   
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

function resetArc(b) { 
    var i = d3.interpolate({value: 0}, b); 
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

Fiddle here也添加了填充顏色。