SVG путь штриха-dasharray переход работает в обратном направлении в некоторых браузерах -d3js

Question

Я использую D3js и я изобразил график, который работает like this (редактирование: новая скрипка с данными JSON)

Я на самом деле с помощью внешнего JSON для моих данных.

var data=[{name:'fruits', value:2},{name:'veggies', value:3},{name:'milk', value:5},{name:'empty', value:0}]; 

Моя проблема заключается в том, что при открытии файла в другой системе с различным разрешением, линией, что я черчение работает в обратном направлении. Я думаю, проблема связана с разным разрешением или может быть из-за чего-то другого. Может кто-нибудь помочь мне решить эту проблему.

Заранее спасибо ...

Answer 1

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

path1.attr("stroke-dasharray", totalLength + " " + totalLength) 
.attr("stroke-dashoffset", totalLength) 
.transition() 
.duration(duration) 
.ease("linear") 
.attr("stroke-dashoffset", 0); 

Вы определение штриха, состоящий из твердого тира по всей длине линии, за которым следует пробел, который является также длиной линии, первоначально смещения по длине линии и переход к нулевому смещению. С этой информацией, а также, к сожалению, смутное определение stroke-dashoffset property in the specs ("'stroke-dashoffset' указывает расстояние до штрихового рисунка, чтобы начать тире«), я действительно не знаю, что должно получиться . будет результатом.

Попробуйте использовать:

path1.attr("stroke-dasharray", 0 + " " + totalLength) 
.transition() 
.duration(duration) 
.ease("linear") 
.attr("stroke-dasharray", totalLength + " " + 0); 

Это говорит ему, чтобы начать с нулевой длиной тиром и зазором по всей длине пути, и переходом к наличию тира по всей длине пути и ноль - пробел. У меня нет Linux, чтобы проверить это, но я подозреваю, что он должен работать где угодно.

Answer 2

Я столкнулся с той же проблемой и установил ее, добавив следующую строку кода:

data.sort(function(a, b){ return d3.descending(a.foo, b.foo); }); 

или

data.sort(function(a, b){ return d3.ascending(a.foo, b.foo); }); 

Это будет сортировать данные по убыванию или по возрастанию заставляя анимации запускать другое в зависимости от того, какой из них работает для вас.