javascript - 在 ie 中流动虚线(svg 路径动画)的最佳选择？-6ren

javascript - 在 ie 中流动虚线(svg 路径动画)的最佳选择？

转载作者：行者123 更新时间：2023-11-29 19:10:01

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

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

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

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

最佳答案

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

关于javascript - 在 ie 中流动虚线(svg 路径动画)的最佳选择？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39731246/

文章推荐： javascript - jquery逻辑从字符串中获取结果

文章推荐： php - 在 PHP 中将一种日期格式转换为另一种日期格式

文章推荐： Mysql 列计数与值计数不匹配(但确实如此!)

文章推荐： javascript - SecurionPay 自定义集成通过 JavaScript 结帐

css - 关于使用“虚线”和“虚线”超链接的任何规则/惯例？
最近，我在各种俄罗斯Web 2.0网站中看到了点缀和虚线超链接的广泛使用。通常，此类链接（在其下方具有虚线或虚线，而不是普通的实线）不会将用户引导至另一页面，而是在同一页面上执行操作而不重新加载该页面
java - 在 Android 上绘制 9 patch 虚线/虚线
Google 没有帮助我找到问题的解决方案。 (据我所知...)。我想知道是否可以在 Android 上画一 strip 有 9 个补丁功能的虚线。我的目标是从一个布局到另一个布局画一条虚线。我
Highcharts 虚线/线段
有没有办法将多条线段视为一条线？ IE:我将鼠标悬停在一个上，两个都突出显示，切换图例中的可见性将隐藏两个部分。 http://jsfiddle.net/rayholland/HSvBj/2/ ser
图表系列中的 C# 虚线？
我在我的 C# WinForms 应用程序中使用 .net 4.0 的图表控件。我有两个系列的数据显示为折线图。我绘制的基本上是作为时间函数的供求关系图。我希望需求是某种颜色的实线，供应是相同颜色的
WPF 虚线 — 在调整大小期间修复虚线
如何在窗口调整大小期间避免线划线调整大小？考虑下图: http://leprastuff.ru/data/img/20130315/b83eea4a7a3f07ca53a0e118ddbb9230.G
javascript - 纯 WebGL 虚线
我正在尝试使用纯 webgl 创建虚线。我知道这已经有一个问题，也许我很笨，但我不知道如何让它发挥作用。我理解这个概念，但我不知道如何在着色器中获取沿路径的距离。以前的答案有以下行: varying
uml - 返回线(虚线)在序列图中究竟代表什么？
我们应该在序列图中的哪些步骤中使用返回线？ )没有返回箭头，因为它们隐式返回实例化对象编辑 2 针对您更新的问题: 我不会有用户操作的返回箭头，例如 login()，因为结果不会以与对象相同的方式
gnuplot png 输出不绘制虚线/虚线
我正在尝试使用 gnuplot v4.4 绘制一个包含虚线和连续线的图形。代码是: set term postscript eps enhanced color set style line 1 li
css - React Nivo 虚线
我正在尝试创建一个 React nivo 折线图，其中包含虚线而不是实线。我研究过图案，但不知道如何制作图案。感谢您的帮助。最佳答案 nivo 在库中提供了自定义图层功能，您可以使用它来自定义从实线
css - React Nivo 虚线
我正在尝试创建一个 React nivo 折线图，其中包含虚线而不是实线。我研究过图案，但不知道如何制作图案。感谢您的帮助。最佳答案 nivo 在库中提供了自定义图层功能，您可以使用它来自定义从实线
swift - 虚线 UIBezierPath 子路径连接点
我使用一些通过的点创建虚线 UIBezierPath。 let pathLayer = CAShapeLayer() pathLayer.strokeColor = UIColor.blue.cgCo
javascript - 用路径创建的圆的 SVG 虚线
我有以下问题。我必须从很多距离太近的点画一个圆。您可以在下面的 jsfiddle 链接中看到它: http://jsfiddle.net/L6e5oz3L/
css - 编辑后的 CSS 虚线
我是 CSS 的新手，正在网上寻找自动重新压缩图像的代码，我发现的代码可以完美地做到这一点。但正确的是，它重新调整图像周围的一些红色虚线，当我尝试编辑时，整个图像消失了。可以请有人帮我解决图像显示时如
android - Firebase Analytics 虚线
已将 Firebase Analytics 集成到我的 Android 项目中，它上个月运行正常，现在它只显示虚线并且用户数为 0。不确定为什么会这样，我哪里错了？由于它之前工作正常，我相信我已经按
java - OpenGL ES - 虚线
我正在使用 OpenGl ES 1.0 开发我的 Android 游戏，我想绘制虚线现在我使用这段代码来画我的线: gl.glColor4f(1.0f, 0.0f, 0.0f, 1.0f); // g
ios - CAShapeLayer 1px 虚线
我正在尝试绘制 1 像素的虚线，但它总是绘制 2 像素的线。当前解决方案: let shapelayer = CAShapeLayer() let path = UIBezierPath() path
css - 虚线 Html 跨度
我这里有一个用 html 编码的菜单，但我需要一条虚线来跨越名称和价格，我将如何在这里做呢？我有点迷路了哈哈。你可以在这里看到它。 http://mystycs.com/menu/menuifram
javascript - Chart.js，虚线，全宽图表
是否可以在 Chart.js 折线图上制作虚线？并使图表全宽？见附件样机。这是我当前的代码(只是简单的例子): var ctx = document.getElementById("main
java - 去掉JTabbedPane "currently selected"虚线
如何删除 JTabbedPane 上当前选定选项卡周围的虚线。例如: 看到它周围的虚线了吗？最佳答案我刚刚找到了一个更好的方法: component.setFocusable(false); 关
r - 如何使用 rgl 绘制虚线/虚线
我正在尝试使用 rgl 绘制一些 3d 形状，但我想使用虚线/虚线连接我的点。我怎样才能做到这一点？目前我有 require(rgl) p1 <- c(0,0,0) p2 <- c(1,0,0) p3

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 ie 中流动虚线(svg 路径动画)的最佳选择？