d3.js 中如何调用进入/退出处理程序?我在这里发布了一个小提琴,并在这里复制了代码。为了清楚起见,我还发布了几张图片。
什么时候data = [13, 15, 21, 42, 5, 18]
在过渡到data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
实际上应该如何
var data1 = [13, 15, 21, 42, 5, 18],
data2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
data = data1,
format = function () {
var text = arguments[0],
args = Array.prototype.slice.call(arguments, 1);
return text.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number]: match;
});
};
var width = 400,
height = 400,
outerRadius = Math.min(width, height) / 2,
innerRadius = outerRadius * .6,
color = d3.scale.category20(),
donut = d3.layout.pie(),
arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);
//Get default settings for a donut chart
var vis, arcs;
vis = d3.select("body")
.append("svg").attr("width", width)
.attr("height", height)
.attr('class', 'pie');
arcs = vis.selectAll('path').data(donut(data));
arcs.enter()
.append('svg:path')
.attr('transform', format("translate({0}, {0})", outerRadius))
.attr('fill', function(d, i) { return color(i); })
.attr('d', arc)
.each(function(d) { this._previous = d; })
.on('click', function(d, i) {
data = data === data1 ? data2: data1;
arcs.data(donut(data))
.transition()
.duration(750)
.attrTween('d', function(a) {
var i = d3.interpolate(this._previous, a);
this._previous = i(0);
return function(t) {
return arc(i(t));
};
});
});
arcs.exit().remove();