如何更改此Raphael繪製的餅圖，以便顏色不會變化

Question

我試圖更改此餅圖，以便在單擊某個細分時，不同細分的顏色不會更改。我看到填充與片段的形狀有直接關係，但我完全吮吸。請幫忙！你可以看到在餅圖這裏行動：

http://raphaeljs.com/growing-pie.html

function drawgrowingpie() { 
    var r = Raphael("holder"); 

    r.customAttributes.segment = function (x, y, r, a1, a2) { 
     var flag = (a2 - a1) > 180, 
      clr = (a2 - a1)/360; 
     a1 = (a1 % 360) * Math.PI/180; 
     a2 = (a2 % 360) * Math.PI/180; 
     return { 
      path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]], 
      fill: "hsb(" + clr + ", .75, .8)" 
     }; 
    }; 

    function animate(ms) { 
     var start = 0, 
      val; 
     for (i = 0; i < ii; i++) { 
      val = 360/total * data[i]; 
      paths[i].animate({segment: [200, 200, 150, start, start += val]}, ms || 1500, "bounce"); 
      paths[i].angle = start - val/2; 
     } 
    } 

    var data = [24, 92, 24, 52, 78, 99, 82, 27], 
     paths = r.set(), 
     total, 
     start, 
     bg = r.circle(200, 200, 0).attr({stroke: "#fff", "stroke-width": 4}); 
    data = data.sort(function (a, b) { return b - a;}); 

    total = 0; 
    for (var i = 0, ii = data.length; i < ii; i++) { 
     total += data[i]; 
    } 
    start = 0; 
    for (i = 0; i < ii; i++) { 
     var val = 360/total * data[i]; 
     (function (i, val) { 
      paths.push(r.path().attr({segment: [200, 200, 1, start, start + val], stroke: "#fff"}).click(function() { 
       total += data[i]; 
       data[i] *= 2; 
       animate(); 
      })); 
     })(i, val); 
     start += val; 
    } 
    bg.animate({r: 151}, 1000, "bounce"); 
    animate(1000); 
}; 

Answer 1

變化

return { 
    // snip... 
    fill: "hsb(" + clr + ", .75, .8)" 
}; 

別的東西，或完全從返回的對象中刪除fill財產。

---

這裏是在正確的方向輕推：不是每一個切片動畫時改變顏色，顏色現在傳遞到segment功能。這意味着兩個不同的調用者（初始化者和點擊處理者）可以不同地控制顏色。如果沒有clr（顏色）傳遞給它，則segment函數被更改爲不返回任何fill信息。這意味着click處理程序的顏色不變，因爲只有初始化代碼傳遞顏色信息。

希望這對你有意義。

function drawgrowingpie() { 
    var r = Raphael("holder"); 
                 // ↓↓↓ pass the color 
    r.customAttributes.segment = function(x, y, r, a1, a2, clr) { 
     var flag = (a2 - a1) > 180; 
     a1 = (a1 % 360) * Math.PI/180; 
     a2 = (a2 % 360) * Math.PI/180; 
     var props = { 
      path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]] 
     }; 

     // only return fill properties if the color was passed 
     if (clr) { 
      props.fill = "hsb(" + clr + ", .75, .8)"; 
      console.log(clr); 
     } 
     return props; 
    }; 

    function animate(ms) { 
     var start = 0, 
      val; 
     for (i = 0; i < ii; i++) { 
      val = 360/total * data[i]; 
      paths[i].animate({ 
       // notice that no color data is passed here... 
       segment: [200, 200, 150, start, start += val] 
      }, ms || 1500, "bounce"); 
      paths[i].angle = start - val/2; 
     } 
    } 

    var data = [24, 92, 24, 52, 78, 99, 82, 27], 
     paths = r.set(), 
     total, start, bg = r.circle(200, 200, 0).attr({ 
      stroke: "#fff", 
      "stroke-width": 4 
     }); 
    data = data.sort(function(a, b) { 
     return b - a; 
    }); 

    total = 0; 
    for (var i = 0, ii = data.length; i < ii; i++) { 
     total += data[i]; 
    } 
    start = 0; 
    for (i = 0; i < ii; i++) { 
     var val = 360/total * data[i]; 
     (function(i, val) { 
      paths.push(r.path().attr({ 
       // ...but we do pass color data here  ↓↓↓↓ 
       segment: [200, 200, 1, start, start + val, val], 
       stroke: "#fff" 
      }).click(function() { 
       total += data[i]; 
       data[i] *= 2; 
       animate(); 
      })); 
     })(i, val); 
     start += val; 
    } 
    bg.animate({ 
     r: 151 
    }, 1000, "bounce"); 
    animate(1000); 
} 

http://jsfiddle.net/mattball/xsfQj/