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 - 虚线动画弧

1 个答案: