在ie中流动虚线（svg路径动画）的最佳选择？

我已经被分配来创建一个流向图表中圆圈的虚线（路径）的图表。我被赋予了原型阶段开始与基于使用以下示例d3.js：在ie中流动虚线（svg路径动画）的最佳选择？

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

然而上述网址在IE浏览器无法正常工作，甚至不是最新的版本。我需要支持IE回到IE9。我的svg动画需求是相当基础的。只需要在圆圈之间流动线条（svg路径）。

什么是最优雅的方式来支持这一要求？寻找最简单，直接的方法，将支持所有主流浏览器的流向svg路径返回到IE9。

2016-09-27 user6867266

简单？向IE9用户显示一个动画GIF。 – Mottie

寻找可重复使用的东西。该图表也是用不同的参数动态生成的，因此1-off动画gif不适用于此。考虑使用js解决方案来制作线条动画。似乎它可能是最直接的解决方案 – user6867266

看起来像有几个js库将执行一些先进的svg动画，如https://maxwellito.github.io/vivus/。然而，我的场景是非常基本的 - 直线虚线动画以不同的速度流动。所以我认为可以使用一个简单的函数或少数几个js函数来完成我需要做的事情 – user6867266

您的示例代码正在使用一些高级CSS执行动画。以下是使用d3 transition编写的相同动画。

最新通报

下面我在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>

原创回答

<!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

感谢将这个示例放在一起。它在ie11和ie10中运行时效果很好，但在ie9中运行时会崩溃。是ie9需要额外的调整？我不需要比ie9更进一步，但我需要支持ie9。不d3声称支持ie9？或者是为某些浏览器支持某些场景所需的polyfills/mixins？ – user6867266

@ user6867266，请参阅上面的更新。我没有意识到'd3'版本4放弃了IE9的支持。我在'd3'版本3中重写了它，并在运行IE9仿真的IE11中对其进行了测试。似乎工作。感谢mark - – 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路径动画）的最佳选择？

回答

相关问题