2012-12-11 6 views
1

http://jsfiddle.net/EyrRD/을 살펴보십시오. 나는 그것의 폭을 변경하여 SVG 사각형에 애니메이션을 D3.js 라이브러리를 사용 :Firefox의 D3.js 전환 버그?

rect.transition().duration(2000).delay(500).ease("cubic-out").attr("width", 500);​ 

모든 다른 브라우저에서 잘 작동하지만 사각형의 폭이 300 픽셀에 도달하면 파이어 폭스에서 애니메이션이 갑자기 멈 춥니 다. 실제로 대상 너비 (> = 300)는 중요하지 않으며 항상 300px에서 멈 춥니 다. 그게 진짜 버그 야? 그렇다면이를 극복하는 방법은 무엇입니까? 그런데, D3.js는 이런 종류의 SVG 애니메이션을위한 최고의 도구입니까?

+0

가능한 복제 http://stackoverflow.com/questions/13568915/firefox-not-displaying-svg –

답변

1

당신은 SVG의 width을 설정해야합니다 : 당신은 SVG에 대한 폭과 높이를 설정해야

파이어 폭스에서
var svg = d3.select("body").append("svg").attr("width", 1000); 

어쩌면 다른 브라우저를 : SVG 요소를. Firefox 버그입니다. 내 관련 SO answer입니다.

+0

감사. 실제로 SVG 너비를 "손으로"(SVG elem에 스타일 매개 변수를 추가하여) 설정하려고 시도했지만 아무 것도 변경하지 않았으므로 다른 곳에 문제가 있다고 가정했습니다. D3.js가 SVG 조작을위한 최상의 도구라고 생각하십니까? – geehertush01

+0

예 사용 편의성과 성능면에서 d3이 최고라고 생각합니다. – Juve

+0

이것은 버그가 아닙니다. 앞으로 다른 브라우저에서이를 요구할 것으로 예상하십시오. –