我被分配创建一个带有流向图表中圆圈的虚线(路径)的图表。我得到了一个基于 d3.js 的原型(prototype)，使用以下示例:
http://bl.ocks.org/nitaku/6354551
但是上面的网址在 IE 中不起作用，甚至在最新版本中也不起作用。我需要将IE支持回IE9。我的 svg 动画要求相当基本。仅需要圆圈之间的流动线条(svg 路径)。
支持此要求的最优雅的方式是什么？寻找最简单、直接的方法，支持在所有主要浏览器(追溯到 IE9)中将 svg 路径流动到圆圈。
最佳答案
您的示例代码使用一些高级 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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9acdbecad0ced0ce" rel="noreferrer noopener nofollow">[email protected]</a>" 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/