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

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

D3js随着时间的推移而绘制？

1 个答案: