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

Question

我被指派创建一个图表，其中虚线（路径）流向图表中的圆圈。我得到了一个原型，它是基于 d3.js 使用以下示例开始的：

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

但是上面的 url 在 IE 中不起作用，即使是最新版本。我需要支持 IE 回到 IE9。我的 svg 动画要求相当基本。只需要圆圈之间的流动线（svg 路径）。

支持此要求的最优雅方式是什么？寻找最简单、最直接的方法，支持在所有主流浏览器中将 svg 路径流动到圆圈，回到 IE9。

Answer 1

您的示例代码使用一些高级 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="d3@4.0.0" 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>

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

best options for flowing dotted lines (svg path animation) in ie?

javascript

css

svg

internet-explorer-9

d3.js