2

我试图以某种方式扫入半圆环图，这意味着从空白屏幕开始，图表开始在 -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 给我一个过渡，在开始时显示一个单色弧，然后其他部分滑入（如果开始时没有弧，这将是正确的 -比例似乎也有点不对）。将初始颜色设置为白色无济于事，因为那样一切都保持白色。

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

4

2 回答 2

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;

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

于 2013-03-28T11:08:06.413 回答
0

上的一个小错字

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-25T15:13:58.433 回答