Обновить размер кусочка пирога в круговой диаграмме Рафаэля

Question

Я работаю над созданием круговой диаграммы, которая показывает результаты с течением времени. Таким образом, он должен оживлять между состояниями, чтобы показать, как изменяются разные срезы. Я выяснил, как изменить все срезы в массе (используя this example в качестве отправной точки), но я хотел бы иметь возможность выбирать и управлять определенным срезом (или сектором, который называет Рафаэль) одновременно. Кто-нибудь понял, как это сделать? Я обнаружил, что если вар пирог моя круговая диаграмма, то я могу получить определенный срез с:

var pie = r.g.piechart(200, 200, 150, dataArray); 
slice = pie.series[0]; 

Но когда я пытаюсь изменить фрагмент с скажем, анимацией (в частности, чтобы изменить его размер), что выходит из строя (сегмент не правильный путь?):

slice.animate({segment: [200, 200, 0, 100]}, 800); 

Любое представление о манипулировании отдельных ломтиков было бы очень полезно.

Answer 1

Я с большим смущением осознал, что атрибут сегмента является настраиваемым атрибутом, созданным и используемым в примере, который я нашел, чтобы обновить путь к кусочку пирога и, следовательно, его размер. Это выглядит следующим образом:

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

Вот что это может выглядеть в контексте: У меня есть три значения [10, 20, 15], что общая до 45. Предполагая, круг с шириной и высотой 250, я могу заполнить круг с ломтиками, используя сегмент пользовательского атрибута, как это (предполагая, что у меня есть DIV на моей странице с идентификатором владельца):

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)" 
    }; 
}; 
points = [10, 20, 15]; 
total = 45; 
start = 0; 
paths = []; 
for(i=0; i<=2; i++) { 
    size = 360/total * points[i]; 
    var slice = r.path(); 
    slice.attr({segment: [250, 250, 200, start, start + size], stroke: "#000", title: "Slice "+i}); 
    paths.push(slice); 
    start += size; 
} 

затем я могу оживить ломтики в моем массиве трактов всякий раз, когда я хочу, по оживление атрибута сегмента:

newPoints = [5, 20, 20]; 
start = 0; 
for(i=0; i<=2; i++) { 
    size = 360/total * newPoints[i]; 
    paths[i].animate({segment: [250, 250, 200, start, start + size]}, 800); 
    paths[i].angle = start - size/2; 
    start += size; 
} 

Некоторые из них я понимаю, некоторые из них я этого не делаю. Но приведенный выше код будет работать (я проверил).