D3 Круговая диаграмма дуги невидима при переходе на 180 °

Question

У меня построена круговая диаграмма с d3 и svg. Я использую переходы в атрибуте d пути svg для анимации изменений в круговой диаграмме. Работает так, как ожидалось, за исключением случаев, когда размер дуги составляет> 180 °. Тогда путь дуги невидим во время перехода.

Демонстрация: http://jsbin.com/EXeXUXE/4/edit

Я думаю, это потому, что d3 производит недопустимый путь к файлу во время перехода:

Error: Problem parsing d="M1.4082973068957338e-14,-230A230,230 0 0.0000013720000000000002,1 135.1904225457546,186.07396897283516L0,0Z" 

Я делаю что-то не так? Это ошибка, и есть ли способ работать вокруг?

Благодаря

Answer 1

Проблема здесь состоит в том, что d3.svg.arc() использует команду A SVG путь рисовать эллиптическую дугу. Формат этой команды следующий.

A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ 

Значение отдельных параметров не имеет значения, единственное отношение здесь large-arc-flag и sweep-flag. Согласно SVG spec

• Из четырех кандидатов дуги разверток, два будет представлять собой дугу развертки больше или равна 180 градусов («большой дуги»), и два будет представлять собой дугу развертки меньше или равно 180 градусов («малая дуга»). Если флаг большой дуги равен «1», тогда будет выбрана одна из двух больших дуговых разверток; в противном случае, если флаг большой дуги равен «0», будет выбрана одна из меньших дуговых разверток,
• Если флаг развертки «1», то дуга будет нарисована в направлении «положительного угла» (е. формула эллипса x = cx + rx * cos (theta) и y = cy + ry * sin (theta) оценивается так, что theta начинается под углом, соответствующим текущей точке, и увеличивается положительно до тех пор, пока дуга не достигнет (x, у)). Значение 0 приводит к тому, что дуга рисуется в направлении «отрицательного угла» (т. Е. Тета начинается с значения угла, соответствующего текущей точке, и уменьшается до достижения дуги (х, у)).

Как их названия, эти флаги, то есть 0/1 значения. Это то, что генерирует d3.svg.arc(). Однако, когда вы интерполируете между ними, используя .transition() с твином пути по умолчанию, D3 интерпретирует их как числовые значения, а не как флаги. Средство означает, что промежуточные пути будут иметь значения между 0 и 1 для этих флагов, которые являются незаконными. Именно из-за этого синтаксический анализ терпит неудачу.

Чтобы исправить, используйте пользовательскую анимацию (которую вы должны использовать для радиальных дорожек в любом случае). См. here для примера, который показывает вам, как это сделать.