d3.js角度渐变动画（弧度渐变）

d3.js角度渐变动画（弧度渐变）

众所周知的原因SVG、Canvas里面都没有角度渐变的API。所以如果要制作一个颜色随着弧度变化而变化的环形，还是挺麻烦的一件事。如果再加上增长减少动画那就更加麻烦了。

如下图所示我们要制作的动画效果，圆环的透明度随着角度的增加而增加。角度为0的时候透明度为0，角度结束的时候透明度为1。注意透明度为1的地方不固定，它随着百分比的变化而变化。

d3实现角度渐变的方式有两种：

1. path分割法：就是把路径分割成细小的块，每一块都填充上不同的颜色。
2. 渐变分割法：把角度渐变分成左右的两个上下渐变。

两种方式各有优缺点。

方法1可以快速生成这样会的彩虹环。

代码如下:

var π = Math.PI,
    τ = 2 * π,
    n = 360;

var width = 300,
    height = 300,
    outerRadius = width / 2 - 20,
    innerRadius = outerRadius - 100;

d3.select("svg").append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  .selectAll("path")
    .data(d3.range(0, τ, τ / n))
  .enter().append("path")
    .attr("d", d3.svg.arc()
        .outerRadius(outerRadius)
        .innerRadius(innerRadius)
        .startAngle(function(d) { return d; })
        .endAngle(function(d) { return d + τ / n * 1.1; }))
    .style("fill", function(d) { return d3.hsl(d * 360 / τ, 1, .5); });

或者这种彩带

上面代码中的n就是把路径分割成多少份，这是个难以控制的参数：

分割太多了会这样：

分割太少了会这样：

如果角度还在动态变化中

这个n的值就会更加难以琢磨了。

方法2就不会存在这个N了。
方法2在github上有个案例：
https://github.com/xswei/ringGradient

思路就是把一个圆分成左右两半，左边几个渐变，右边一个渐变，两个渐变配合使用。这个案例中的颜色是随着角度而固定不变的。所以要实现一开始图中透明度为1的地方随着比例变化而变化，还需要进一步的加工处理。

分为两种情况，当比例小于50%的时候，左边就不显示，右边的透明度就是从0-1变化。
当值大于50%的时候，左边的透明度就是从1-x，左边就是就0-x。x的值是50/百分比。这样整体就会衔接的比较好。
但是当值在50%-80%之间的时候，方法仔细瞅，会发现左边比右边的量一点点，嗯，因为它短，所以亮，这个细节我暂时还没处理，因为在d3中我也处理不了，除非在three上shader。

当环的半径变大的时候这个问题更加明显

现在渐变的环已经做好了，后面就是做动画的这个难度不大，直接撸代码就可以了。