Я использую Raphaëlв первый раз с небольшим опытом работы с svg, и мне нужен кто-то, кто действительно хорошо разбирается в этих двух, чтобы помочь мне.
Я создал круговую диаграмму с динамическими секторами. Размер секторов можно изменить, перетаскивая круглые кнопки. См. эту скрипку.Я тестировал только в Chrome и Safari, которые являются единственными необходимыми браузерами.
Круговая диаграмма еще не завершена. Сектора могут перекрываться. Пожалуйста, пока игнорируйте это.
Столкнулся с проблемой, когда начальный угол сектора был больше конечного угла. Это тот случай, когда конечный угол выходит за отметку 0/360°. Чтобы решить эту проблему, я использовал параметр path-rotate. Я переместил сектор вперед, а углы назад, пока конечный угол не будет равен 360. Вы можете увидеть это на скрипке в этой функции:
function sector_update(cx, cy, r, startAngle, endAngle, sec) {
var x1 = cx + r * Math.cos(-startAngle * rad),
x2 = cx + r * Math.cos(-endAngle * rad),
y1 = cy + r * Math.sin(-startAngle * rad),
y2 = cy + r * Math.sin(-endAngle * rad);
var rotation = 0;
// This is the part that I have the feeling could be improved.
// Remove the entire if-clause and let "rotation" equal 0 to see what happens
if (startAngle > endAngle) {
rotation = endAngle;
startAngle = startAngle - endAngle;
endAngle = 360;
}
sec.attr('path', ["M", cx, cy, "L", x1, y1, "A", r, r, rotation,
+(endAngle - startAngle > 180), 0, x2, y2, "z"]);
}
Хотя это работает хорошо, я немного скептичен. Можно ли это решить без поворота пути? Я ценю любую помощь или указатели.