Question

这是一个显示用2种颜色填充圆圈的链接。 http://jsfiddle.net/9ChXk/

这是代码：

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

我希望圈子能够根据时间不断改变填充...这样的链接 - ＆gt; http://invision-web.net/ticket-status/

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

Answer 1

改变毕业的'y1'属性就可以了。您甚至可以添加过渡以获得平滑效果：

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

JsFiddle：http://jsfiddle.net/chrisJamesC/9ChXk/18/

编辑：要有一系列过渡：

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)

JsFiddle：http://jsfiddle.net/chrisJamesC/9ChXk/20/

根据时间填充圆上的过渡

1 个答案: