D3.js 基于时间在圆上填充过渡

这是一个显示用2种颜色填充一个圆的链接。

代码如下：

var r = 100;

var svg = d3.select("body").append("svg");

var grad = svg.append("defs").append("linearGradient").attr("id", "grad")
           .attr("x1", "0%").attr("x2", "0%").attr("y1", "100%").attr("y2", "0%");
grad.append("stop").attr("offset", "50%").style("stop-color", "lightblue");
grad.append("stop").attr("offset", "50%").style("stop-color", "white");

svg.append("circle")
.attr("cx", r)
.attr("cy", r)
.attr("r", r)
.attr("stroke", "blue")
.attr("fill", "url(#grad)");

我希望圆圈根据时间不断更改填充…类似于此链接->

---

如何在d3.js中完成？请帮帮我

更改grad的“y1”属性就可以做到这一点。您甚至可以添加过渡以获得平滑效果：

grad.transition().duration(1000).attr("y1","20%")

JsFiddle：

编辑：要拥有一系列转换，请执行以下操作：

var data = ["10%","40%","80%","20%","60%","90%","40%","50%","80%","20%"];
var data2 = [10,40,80,20,60,90,40,50,80,20]
var position = 0;    
window.setInterval(function() {
    grad.transition().duration(1000).attr("y1",((100-data2[position])*2).toString()+'%');
    position = (position+1)%data2.length;
},1000)

---

JSIDLE:

var数据=[“10%，“40%，“80%，“20%，“60%，“90%，“40%，“50%，“80%，“20%”]；如果这是数据集，并且我希望填充转换在某个延迟后保持更改，那么该如何进行呢？您可以使用查看。您可以通过给出一个相同的示例进行解释。我是D3新手！