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

---

小提琴-http: //jsfiddle.net/4c1ukb1z/-您需要根据代码/数据结构更新投影和“时间”属性解析。

---

当然，如果要获取日期时间对象，也可以使用时标来执行此操作。