d3饼图转换与attrtween

我试图以某种方式在半圆环图中扫描，意思是从空白屏幕开始，图表开始在-90度（或270）处绘制并执行半圆直到达到90度。代码如下：d3饼图转换与attrtween

var width = 800; 
var height = 400; 
var radius = 300; 
var grad=Math.PI/180; 
var data = [30, 14, 4, 4, 5]; 
var color = d3.scale.category20(); 
var svg = d3.select("body").append("svg").attr("width", width).attr("height", 
`height).append("g").attr("transform", "translate(" + radius*1.5 + "," + radius*1.5 + 
")"); 
var arc = d3.svg.arc().innerRadius(radius - 100).outerRadius(radius - 20); 
var pie = d3.layout.pie().sort(null); 
svg.selectAll("path").data(pie(data)).enter().append("path").attr("d", 
arc).attr("fill", 
function(d, i) { return color(i); }).transition().duration(500).attrTween("d", sweep); 

function sweep(a) { 
    var i = d3.interpolate({startAngle: -90*grad, endAngle: -90*grad},{startAngle: -90*grad, endAngle: 90*grad}); 
    return function(t) { 
    return arc(i(t)); 
    }; 
}

看几个例子我设法拿到了动画，但是，我不能在数据绑定（或转换）的弧。我的感觉是，只有一条路径被绘制，然后停止。

如果我改变插值开始/结束-90/90和一，我得到不同的颜色，但不是所有的人。将开始/结束角添加到pie-var中给了我一个转换，其中在开始处显示单色弧，然后其他部分滑入（如果开始时没有弧，这将是正确的 - 比例也显得有点不对）。将初始颜色设置为白色并不能解决问题，因为这样一切都保持白色。

我害怕我错过了一个明显的观点，但到目前为止我卡住了，也许有人可以指出我在正确的方向。

来源

2013-03-27 Herbert Hubert

颇有些变化和考验，它在某种程度上开始工作，用这些来的代码行：

var pie = d3.layout.pie().sort(null).startAngle(-90*grad).endAngle(90*grad); 

var i = d3.interpolate({startAngle: -90*grad, endAngle: -90*grad},a);

一个最后的“问题”是，SVG的高度太小，所以一些细分了切断，所以改为

var height = 800;

结束了我的搜索。感谢您的任何考虑。

来源

2013-03-28 11:08:06

在

var svg = d3.select("body").append("svg").attr("width", width).attr("height", `height)

小错字应该是：

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height)

来源

2013-10-25 15:13:58 muyueh

d3饼图转换与attrtween

回答

相关问题