在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路徑動畫）的最佳選擇？

回答

相關問題