d3.js类规弧初始化和过渡

我希望您能帮助我建立一种“量规”，一种基于“圆弧”的圆，可以动态填充0到100的值（8个量规）

我能够让它工作（基于Arc时钟要点），但现在我试图在每次更新和开始时强制转换

我正在尝试实现以下流程： 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）；
变量字段=[
{name:“A”，值：100，前一个值：0，大小：100}，
{name:“B”，值：100，前一个值：0，大小：100}，
{name:“C”，值：100，前一个值：0，大小：100}，
{name:“D”，值：100，前一个值：0，大小：100}，
{name:“E”，值：100，前一个值：0，大小：100}，
{name:“F”，值：100，前一个值：0，大小：100}，
{name:“G”，值：100，前一个值：0，大小：100}，
{name:“H”，值：100，前一个值：0，大小：100}
];
var arc=d3.svg.arc（）
.内半径（40）
.外层（60）
.startAngle（0）
.endAngle（函数（d）{return（d.value/d.size）*2*Math.PI；}）；
var svg=d3.select（“body”）.append（“svg:svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.append（“svg:g”）
.attr（“转换”、“转换（0）”+（h/2）+”）；
var path=svg.selectAll（“路径”）
.data（fields.filter（函数（d）{return d.value；}），函数（d）{return d.name；}）
.enter（）.append（“svg:path”）
.attr（“transform”，函数（d，i）{return”translate（“+x（i）+”，0）”；}）
.transition（）
.ease（“liniar”）
.持续时间（750）
.attrTween（“d”，arcTween）；
setTimeout（函数（）{services（）}，750）；
setInterval（函数（）{services（）；}，5000）；
职能服务（）{
对于（变量i=0；i

下面是现场观看的JSFIDLE：

---

提前谢谢

类似以下链转换的内容可以完成圆弧，然后返回到下一个值：

    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" } });

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));
  };  
}

---

还添加了填充颜色。

完美！！谢谢你，伙计！我的最后一个问题是如何将不同的颜色设置为不同的值？我希望它在值为99或更小时用红色填充，在值为100时用绿色填充，这有可能是一个简单的实现吗？我知道它有点像：.style（“fill”，function（d）{if（d.value<100）{return“red”；}else{return“green”}}），但不确定放在哪里，所以它也会包含在transitionedited中。这将添加填充颜色，以便当值达到100时，仪表变为红色。它不会在动画中变为红色（先变为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));
  };  
}