Как изменить эту круговую диаграмму Рафаэля, так что цвета не меняются

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. Это означает, что два разных абонента (инициализатор и обработчик кликов) могут управлять цветом по-разному. Функция 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/