Question

我试图以某种方式扫描半圆形图表，意味着从空白屏幕开始，图表开始绘制在-90度（或270度）并执行半圆形直到达到90度。代码如下：

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和a，我会得到不同的颜色但不是全部。将开始/结束角度添加到pie-var会给我一个过渡，其中一开始显示一个彩色的弧，然后其他部分滑入（如果开头没有弧，这将是正确的 - 比例似乎也有点不对劲）。将初始颜色设置为白色无济于事，因为一切都保持白色。

我害怕我错过了一个明显的观点，但到目前为止我已经陷入困境，也许有人可以指出我正确的方向。

Answer 1

经过相当多的变化和测试后，它开始工作，使用这些代码行：

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;

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

Answer 2

上的小错字

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)

d3饼图转换与attrtween

2 个答案: