d3.js инициализация и переход дуги в виде калибровочной оси

Question

Я бы хотел, чтобы вы помогли создать своего рода «калибр», основанный на «дуге» круг, который будет заполнять значение от 0 до 100 динамически (8 датчиков).

Мне удалось получить эту работу (на основе Arc Clock gist https://gist.github.com/mbostock/1098617), но теперь я пытаюсь заставить переход при каждом обновлении и в начале.

Я пытаюсь реализовать следующий поток: 1. arch loaded - переходит от 0 до 100 -> от 100 до начального значения 2. arch updated - переходит от предыдущего значения в 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 также с добавлением цвета заливки.