D3js 随着时间的推移绘制？

Question

我正在尝试在地图上绘制几个月内的地震。使用以下代码，我绘制了所有地震事件，但我想缩放时间段并使其像视频一样。

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
    ]) + ")";
 });

如何在 15 秒的动画中显示所有这些地震？我想到的一种方法是：将所有圆圈（按日期排序）附加 radius 0，然后增加第一个圆圈的半径，然后 setTimeout 增加下一个圆圈的半径，依此类推。 .有什么更好的方法吗？

我知道时间尺度，但不知道如何使用它们来绘制时间？

Answer 1

首先在动画持续时间内缩放最小和最大时间（使用 .getTime()）

var timeScale = d3.scale.linear()
                    .domain([min, max])
                    // a one second delay before we start + 14 seconds of earthquakes
                    .range([1000, 15000])

然后只要设置超时时间就可以根据缩放的时间显示点数

...
.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/ - 您需要根据您的代码/数据结构更新投影和 When 属性解析。

当然，如果您正在获取日期时间对象，也可以使用时间尺度来执行此操作。

D3js 随着时间的推移绘制？

D3js draw over time?

javascript

timeline

timer

d3.js