[英]D3js draw over time?
I'm trying to draw earthquakes over a period of few months on a map. 我正在尝试在地图上绘制几个月内的地震。 With the following code I've drawn all the earthquake occurences but I want to scale the time period and make it video-like. 使用以下代码,我已经绘制了所有地震发生的地方,但是我想缩放时间段并使它像视频一样。
svg.selectAll(".shock")
.data(data)
.enter().append("circle")
.attr("class", 'shock')
.attr("r", 5)
.attr("transform", function(d) {
return "translate(" + projection([
d.lng,
d.lat
]) + ")";
});
How do I show all these earthquakes in a 15 second animation? 如何以15秒的动画显示所有这些地震? One way I've thought is: append all circles (date-sorted) with radius 0
, then increase the radius of the first one, and setTimeout
to increase the radius of the next one and so on.. Is there any better way? 我想过的一种方法是:将radius 0
所有圆(按日期排序)追加,然后增加第一个圆的半径,并使用setTimeout
增加下一个圆的半径,依此类推。等等。还有什么更好的方法吗?
I know about time scales, but don't know how to use them to draw over time? 我知道时间刻度,但是不知道如何使用它们绘制时间?
First scale your min and max time (using .getTime()
) over the animation duration 首先在动画持续时间内缩放您的最小和最大时间(使用.getTime()
)
var timeScale = d3.scale.linear()
.domain([min, max])
// a one second delay before we start + 14 seconds of earthquakes
.range([1000, 15000])
Then just set timeouts to display the points according to the scaled time 然后只需设置超时即可根据缩放的时间显示点
...
.attr("display", function (d) {
// set a timeout to show this at the right time
var self = this;
setTimeout(function () {
d3.select(self).attr("display", "block")
}, timeScale((new Date(d.When)).getTime()));
return "none";
})
Fiddle - http://jsfiddle.net/4c1ukb1z/ - you'll need to update the projections and the When attribute parsing according to your code / data structure. 小提琴-http: //jsfiddle.net/4c1ukb1z/-您需要根据代码/数据结构更新投影和“时间”属性解析。
Of course, it would be possible to do this using timescales too if you are getting date time objects. 当然,如果要获取日期时间对象,也可以使用时标来执行此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.