📅  最后修改于: 2023-12-03 15:30:20.467000             🧑  作者: Mango
pie.endAngle()
是D3.js中pie图的一个方法,用于设置饼图的结束角度。
pie.endAngle(angle)
angle
参数是一个函数,用来设置饼图的结束角度。该函数接收每个饼图数据元素、索引和当前的饼图数据集作为参数。
该方法返回一个函数,该函数用于获取当前饼图的结束角度。
var data = [10, 20, 30, 40];
var pie = d3.pie()(data);
var arc = d3.arc()
.innerRadius(0)
.outerRadius(100);
var svg = d3.select("body").append("svg")
.attr("width", 200)
.attr("height", 200);
svg.selectAll("path")
.data(pie)
.enter().append("path")
.attr("d", arc)
.attr("fill", function(d, i) { return d3.schemeCategory10[i]; })
.each(function(d) {
this._current = d;
});
svg.on("click", function() {
pie.endAngle(function(d) { return d.startAngle + Math.random() * Math.PI; });
svg.selectAll("path")
.data(pie)
.transition()
.duration(1000)
.attrTween("d", function(d) {
var interpolate = d3.interpolate(this._current, d);
this._current = interpolate(0);
return function(t) {
return arc(interpolate(t));
};
});
});
上述代码通过点击svg元素,随机生成每个饼图数据元素的结束角度,然后通过过渡效果来更新饼图。pie.endAngle()
方法用于设置每个饼图数据元素的结束角度。