ie에 점선 (svg 경로 애니메이션)을 흐르게하는 데 가장 좋은 옵션은 무엇입니까?

차트의 원으로 흐르는 점선이있는 차트를 만들도록 지정되었습니다. 나는 다음과 같은 예제를 사용 d3.js를 기반으로 한 것을 시작하는 프로토 타입을 받았다 :ie에 점선 (svg 경로 애니메이션)을 흐르게하는 데 가장 좋은 옵션은 무엇입니까?

http://bl.ocks.org/nitaku/6354551

URL이 위, IE에서조차 최신 버전을 작동하지 않습니다하지만. IE9를 지원해야합니다. 내 svg 애니메이션 요구 사항은 상당히 기본입니다. 서클 사이에는 흐르는 선 (svg 경로) 만 필요합니다.

이 요구 사항을 지원하는 가장 효율적인 방법은 무엇입니까? IE9로 돌아가는 모든 주요 브라우저에서 서클에 흐르는 svg 경로를 지원하는 가장 간단하고 직접적인 방법을 찾고 있습니다.

출처

2016-09-27 user6867266

간단한을? IE9 사용자에게 애니메이션 GIF를 보여줍니다. – Mottie

재사용 가능한 것을 찾고 있습니다. 또한 차트는 다른 매개 변수로 동적으로 생성되므로 1-off 애니메이션 GIF가이 기능을 수행하지 않습니다. js 솔루션을 사용하여 선을 애니메이션화하는 방법에 대해 생각해보십시오. 가장 간단한 솔루션이 될 수있는 것 같습니다 – user6867266

이 하나의 https://maxwellito.github.io/vivus/와 같은 몇 가지 고급 svg 애니메이션을 할 여러 js 라이브러리가있는 것처럼 보입니다. 그러나, 내 시나리오는 매우 기본적인 것입니다 - 직선 점선은 다양한 속도로 흐르는 애니메이션. 그래서 나는 간단한 함수 나 소수의 js 함수를 사용하여 내가 수행 할 작업을 수행 할 수 있다고 생각한다. – user6867266

예제 코드는 일부 고급 CSS를 사용하여 애니메이션을 만들고 있습니다. 다음은 d3 transition을 사용하여 작성된 동일한 애니메이션입니다.

UPDATES 내가 D3 버전 4에서 쓴 여기에 ... IE9에서 작동하지 않는 것보다 버전은 D3 버전 3 예제

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    <style> 
 
    .node { 
 
     fill: #dddddd; 
 
     stroke: gray; 
 
     stroke-width: 4; 
 
    } 
 
    
 
    .flowline { 
 
     fill: none; 
 
     stroke: black; 
 
     opacity: 0.5; 
 
     stroke-width: 4; 
 
     stroke-dasharray: 10, 4; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var width = 960, 
 
     height = 500; 
 

 
    var svg = d3.select('body').append('svg') 
 
     .attr('width', width) 
 
     .attr('height', height); 
 

 
    var ex1 = svg.append('g') 
 
     .attr('transform', 'translate(50 50)'); 
 

 
    ex1.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M100 100 L300 100'); 
 

 
    ex1.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M200 300 L300 100'); 
 

 
    ex1.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M200 300 L300 250'); 
 

 
    ex1.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M300 250 L100 100'); 
 

 
    ex1.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 100) 
 
     .attr('cy', 100) 
 
     .attr('r', 20); 
 

 
    ex1.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 300) 
 
     .attr('cy', 100) 
 
     .attr('r', 20); 
 

 
    ex1.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 200) 
 
     .attr('cy', 300) 
 
     .attr('r', 20); 
 

 
    ex1.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 300) 
 
     .attr('cy', 250) 
 
     .attr('r', 20); 
 

 
    var ex2 = svg.append('g') 
 
     .attr('transform', 'translate(450 50)'); 
 

 
    ex2.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M100 100 S200 0 300 100'); 
 

 
    ex2.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M200 300 S200 200 300 100'); 
 

 
    ex2.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M200 300 S300 350 300 250'); 
 

 
    ex2.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M300 250 L100 100'); 
 

 
    ex2.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 100) 
 
     .attr('cy', 100) 
 
     .attr('r', 20); 
 

 
    ex2.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 300) 
 
     .attr('cy', 100) 
 
     .attr('r', 20); 
 

 
    ex2.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 200) 
 
     .attr('cy', 300) 
 
     .attr('r', 20); 
 

 
    ex2.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 300) 
 
     .attr('cy', 250) 
 
     .attr('r', 20); 
 

 
    function animate(){ 
 
     d3.select(this) 
 
     .transition() 
 
     .ease('linear') 
 
     .duration(1000) 
 
     .styleTween("stroke-dashoffset", function() { 
 
      return d3.interpolate(0, 14); 
 
     }) 
 
     .each("end", animate); 
 
    } 
 

 
    d3.selectAll(".flowline") 
 
     .each(animate); 
 

 
    </script> 
 
</body> 
 

 
</html>

을

Original Answer

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
    <!--[if lte IE 9]> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aight/1.2.2/aight.d3.min.js"></script> 
 
    <![endif]--> 
 
    
 
    
 
    <style> 
 
    .node { 
 
     fill: #dddddd; 
 
     stroke: gray; 
 
     stroke-width: 4; 
 
    } 
 
    
 
    .flowline { 
 
     fill: none; 
 
     stroke: black; 
 
     opacity: 0.5; 
 
     stroke-width: 4; 
 
     stroke-dasharray: 10, 4; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var width = 960, 
 
     height = 500; 
 

 
    var svg = d3.select('body').append('svg') 
 
     .attr('width', width) 
 
     .attr('height', height); 
 

 
    var ex1 = svg.append('g') 
 
     .attr('transform', 'translate(50 50)'); 
 

 
    ex1.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M100 100 L300 100'); 
 

 
    ex1.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M200 300 L300 100'); 
 

 
    ex1.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M200 300 L300 250'); 
 

 
    ex1.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M300 250 L100 100'); 
 

 
    ex1.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 100) 
 
     .attr('cy', 100) 
 
     .attr('r', 20); 
 

 
    ex1.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 300) 
 
     .attr('cy', 100) 
 
     .attr('r', 20); 
 

 
    ex1.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 200) 
 
     .attr('cy', 300) 
 
     .attr('r', 20); 
 

 
    ex1.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 300) 
 
     .attr('cy', 250) 
 
     .attr('r', 20); 
 

 
    var ex2 = svg.append('g') 
 
     .attr('transform', 'translate(450 50)'); 
 

 
    ex2.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M100 100 S200 0 300 100'); 
 

 
    ex2.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M200 300 S200 200 300 100'); 
 

 
    ex2.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M200 300 S300 350 300 250'); 
 

 
    ex2.append('path') 
 
     .attr('class', 'flowline') 
 
     .attr('d', 'M300 250 L100 100'); 
 

 
    ex2.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 100) 
 
     .attr('cy', 100) 
 
     .attr('r', 20); 
 

 
    ex2.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 300) 
 
     .attr('cy', 100) 
 
     .attr('r', 20); 
 

 
    ex2.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 200) 
 
     .attr('cy', 300) 
 
     .attr('r', 20); 
 

 
    ex2.append('circle') 
 
     .attr('class', 'node') 
 
     .attr('cx', 300) 
 
     .attr('cy', 250) 
 
     .attr('r', 20); 
 
     
 
    animate(); 
 
    function animate() { 
 
     d3.selectAll(".flowline") 
 
     .transition() 
 
     .duration(1000) 
 
     .ease(d3.easeLinear) 
 
     .styleTween("stroke-dashoffset", function() { 
 
      return d3.interpolate(0, 14); 
 
     }) 
 
     .on("end", animate); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

출처

2016-09-27 18:30:34 Mark

그 샘플을 함께 넣어 주셔서 감사합니다. 그것은 ie10뿐만 아니라 ie10에서 그것을 실행할 때 잘 작동하지만, ie9에서 실행할 때 충돌합니다. ie9에 추가 조정이 필요합니까? ie9보다 더 뒤로 갈 필요는 없지만 ie9를 지원해야합니다. d3가 ie9를 지원한다고 주장하지 않습니까? 또는 일부 브라우저의 일부 시나리오를 지원하는 데 필요한 polyfill/mixin입니까? – user6867266

@ user6867266, 위의 업데이트를 참조하십시오. 나는 'd3' 버전 4가 IE9 지원을 중단했다는 것을 몰랐습니다. 나는 그것을 'd3' 버전 3에서 다시 작성하고 IE9 에뮬레이션을 실행하는 IE11에서 테스트했습니다. 일하는 것 같습니다. – Mark

감사 마크 - 예제가 잘 작동합니다. 그것을 함께 넣어 주셔서 감사합니다. 귀하의 접근 방식을 내가 작업하고있는 특정 구현에 통합하려고합니다. 여기에 경로/플로우 라인이있는 svg가 있습니다 : [https://www.dropbox.com/s/svcx1lonuy9l267/NeSeFlow.svg?dl=0]. 다음은 html/js : [https://jsbin.com/timixuq/edit?html,output]입니다. 솔루션은 ie10에서 작동하지만 ie9에서 d3 오류를 발생시킵니다. 문제가 보이면 좀보세요. – user6867266

ie에 점선 (svg 경로 애니메이션)을 흐르게하는 데 가장 좋은 옵션은 무엇입니까?

답변

관련 문제