Как сделать круговую диаграмму, зависимую от чекбоксов?

#javascript #html #css #svg #canvas

Нужно, что бы диаграмма заполнялась в зависимости от выбранных чекбоксов. Как это
можно сделать?


    

Ответы

Ответ 1

UPD: версия со скругленными секторами может выглядеть вот так



Собрал пример на svg + d3.js, для генерации svg путей в d3 есть модуль d3-shape,
в котором есть генераторы для фигур различных форм, в том числе d3.pie() и d3.arc()
из которых в свою очередь собран этот пример.

Все переходы посчитаны при помощи d3.interpoalte() который любезно умеет интерполировать
цвета, строки, объекты =)

UPD: доделал начальную анимацию линий подписей


  Более подробные комментарии в коде