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。

當環的半徑變大的時候這個問題更加明顯

現在漸變的環已經做好了，後面就是做動畫的這個難度不大，直接擼代碼就可以了。