我希望你能帮助建立一种'规格',一个基于'弧'的圆圈,它可以动态地填充从0到100的值(8个量程)。
我能够让这个工作(基于Arc Clock gist https://gist.github.com/mbostock/1098617),但现在我正试图在每次更新和开始时强制转换。
我正在尝试实现以下流程: 1. arch加载 - 从0到100 - >从100到初始值 2. arch更新 - 从之前的值变为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/ 提前谢谢!
答案 0 :(得分:2)
类似下面的链转换可以完成弧,然后返回到下一个值:
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也添加了填充色。