beste Optionen für fließende gepunktete Linien (Svg Pfadanimation) in ie?

Mir wurde zugewiesen, um ein Diagramm mit gepunkteten Linien (Pfade) zu erstellen, die in Kreisen in einem Diagramm fließen. Ich war einen Prototyp mit dem Start gegeben wurde basierend auf d3.js das folgende Beispiel:beste Optionen für fließende gepunktete Linien (Svg Pfadanimation) in ie?

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

jedoch die URL oben nicht in IE funktioniert, auch nicht die neueste Version. Ich muss IE zu IE9 unterstützen. Meine SVG-Animationsanforderungen sind ziemlich einfach. Nur fließende Linien (Svg-Pfade) zwischen Kreisen sind erforderlich.

Was wäre die eleganteste Art, diese Anforderung zu unterstützen? Auf der Suche nach dem einfachsten und geradlinigsten Ansatz, der fließende Svg-Pfade zu Kreisen in allen gängigen Browsern unterstützt, die auf IE9 zurückgehen.

Quelle

2016-09-27 user6867266

einfachste? Zeigen IE9 Benutzer ein animiertes Gif. – Mottie

auf der Suche nach etwas wiederverwendbar. Außerdem wird das Diagramm dynamisch mit verschiedenen Parametern generiert, sodass ein 1-aus-animiertes GIF nicht funktioniert. darüber nachdenken, eine js-Lösung zu verwenden, um die Linien zu animieren. scheint wie es könnte die einfachste Lösung sein – user6867266

sieht aus wie es gibt mehrere js Bibliotheken, die einige fortgeschrittene Svg-Animation wie diese https://maxwellito.github.io/vivus/ tun wird. Allerdings ist mein Szenario sehr einfach - gerade gepunktete Linien, die animiert werden, um mit variablen Geschwindigkeiten zu fließen. also denke ich, dass eine einfache Funktion oder eine Handvoll von js-Funktionen verwendet werden kann, um das zu erreichen, was ich tun muss – user6867266

Ihr Beispiel Code macht die Animation mit einigen fortgeschrittenen CSS. Hier ist die gleiche Animation geschrieben mit einem d3 transition.

UPDATES

Die Version unter I in d3 Version 4 geschrieben und scheint nicht ... in IE9 arbeiten Hier ist eine d3 Version 3 Beispiel:

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

Ursprüngliche Antwort

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

Quelle

2016-09-27 18:30:34 Mark

danke für das Zusammensetzen dieses Beispiels. es funktioniert gut, wenn ich es in ie11 sowie ie10 starte, stürzt aber ab, wenn ich es in ie9 starte. ist eine zusätzliche Optimierung für ie9 erforderlich? Ich muss nicht weiter zurückgehen als ie9, aber ich muss ie9 unterstützen. beansprucht d3 nicht, ie9 zu unterstützen? Oder sind Polyfills/Mixins erforderlich, um einige Szenarien für einige Browser zu unterstützen? – user6867266

@ user6867266, siehe Aktualisierungen oben. Ich habe nicht realisiert, dass "d3" Version 4 die IE9-Unterstützung verloren hat. Ich schrieb es in 'd3' Version 3 um und testete es in IE11 mit IE9 Emulation. Scheint zu arbeiten. – Mark

Danksagung - Ihr Beispiel funktioniert gut. danke für das zusammenstellen. Ich versuche, Ihren Ansatz in eine spezifische Implementierung zu integrieren, an der ich gerade arbeite. Hier ist die Svg mit dem Pfad/Flowline: [https://www.dropbox.com/s/svcx1lonuy9l267/NeSeFlow.svg?dl=0]. Hier ist die html/js: [https://jsbin.com/timixuq/edit?html,output]. Die Lösung funktioniert in ie10, löst aber einen d3-Fehler in ie9 aus. wirst du bitte einen Blick und LMK, wenn Sie das Problem sehen? – user6867266

beste Optionen für fließende gepunktete Linien (Svg Pfadanimation) in ie?

Antwort

Verwandte Themen