d3饼图转换与attrtween [英] d3 pie chart transition with attrtween

问题描述

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

i'm trying to somehow sweep in a half-donut-chart, meaning starting with a blank screen the chart starts drawing at -90 degree (or 270) and performs a halfcircle until reaching 90 degree. the code looks like:

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));
    };
}

看看我设法获得动画的几个例子，绑定（或转换）数据到弧。我的感觉是，只有一个绘制的路径，然后它停止。

looking at several examples i managed to get the animation, however, i fail at binding (or converting) the data to the arc. my feeling is that there is only one path drawn and then it stops.

如果我改变插值开始/结束-90/90和a，我得到不同的颜色但不是所有的。将开始/结束角度添加到饼图变量给我一个过渡，其中在开始显示单色弧，然后其他部分滑入（这将是正确的，如果在开始没有弧 - 比例也似乎有点错误）。将初始颜色设置为白色不会有帮助，因为那样一切都保持白色。

if i change the interpolation to start/end -90/90 and a, i get different colors but not all of them. adding the start/end-angle to the pie-var gives me a transition where a one-colored-arc is shown at the beginning and then the other parts slide in (which would be correct if there was no arc at the beginning - the proportions also seem a bit wrong). setting the initial color to white does not help because then everything stays white.

我害怕我缺少一个明显的点，但到目前为止，也许有人可以指出我的方向正确。

i'm afraid i'm missing an obvious point, but so far i'm stuck, maybe someone can point me in the right direction.

推荐答案

经过一些变化和测试它不知何故开始工作，代码行：

after quite some variations and tests it somehow started to work, using these to lines of code:

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的高度太小， ，因此将其更改为

one final "problem" was that the height of the svg was too small and so some segments got cut off, so changing it to

var height = 800;

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

ended my search. thanks for any considerations.

这篇关于d3饼图转换与attrtween的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！