d3.js 类似仪表的弧初始化和过渡

Question

我希望您能协助构建一种“仪表”，一个基于“弧”的圆圈，可以动态填充 0 到 100 的值（8 个仪表）。

我能够让这个工作（基于 Arc Clock gist https://gist.github.com/mbostock/1098617），但现在我试图在每次更新和开始时强制转换。

我正在尝试实现以下流程： 1. 加载拱门 - 从 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 还添加了填充颜色。