數據映射 - 虛線動畫圓

Question

幫助，

我正在使用數據映射來創建世界地圖，並且我有從點到點的實線弧。他們是動畫，所以他們在頁面上繪製。然而嘗試，因爲我可能找不到一種方法使弧形成爲虛線，以便動畫顯示爲虛線以點到點的方向移動。無論如何，我無法找到這樣一個例子，我想給出運動的錯覺，數據沿着弧線從一點連續流向另一點。這在數據地圖中甚至可能嗎？那裏有例子嗎？我在回答問題時不得不使用googling錯誤的東西。

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>