d3.js - 数据地图 - 虚线动画弧

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>