数据图 - 虚线动画弧

Question

求助，

我正在使用数据地图创建世界地图，并且我有从一点到另一点的实线弧。它们是动画的，所以它们被绘制在页面上。但是，尽管我可能会尝试，但我找不到使弧线变为虚线的方法，以便动画看起来像虚线在一个方向上从一个点移动到另一个点。无论如何我都找不到这样的例子，我想给人一种运动的错觉，即数据沿着弧形从一个点连续流到另一个点。这在数据图中甚至可能吗？那里有例子吗？我一定是在谷歌上搜索了错误的东西，因为我找不到答案。

Answer 1

您可以使用 CSS 动画实现此功能。

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500).attr("height", 400);

var x = d3.scale.linear().domain([0, 10]).range([0, 700]);
var y = d3.scale.linear().domain([0, 10]).range([10, 290]);

var data = d3.range(50).map(function() {
  return Math.random() * 10
})
var line = d3.svg.line()
  .interpolate("cardinal")
  .x(function(d, i) {
    return x(i);
  })
  .y(function(d) {
    return y(d);
  });

var path = svg.append("svg:path").attr("d", line(data));

 #line {
   width: 100%;
   margin: 20px 0;
   height: 300px;
   background: #eee;
 }
 
 path {
   stroke: steelblue;
   stroke-width: 1;
   fill: none;
   stroke-dasharray: 10;
   animation: dash 5s linear infinite;
   animation-direction: reverse;
 }
 
 @keyframes dash {
   to {
     stroke-dashoffset: 1000;
   }
 }
 
 button {
   margin: 20px 0 0 20px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

数据图 - 虚线动画弧

datamaps - dashed animated arc

d3.js

datamaps