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/-您需要根據代碼/數據結構更新投影和“時間”屬性解析。

---

當然，如果要獲取日期時間對象，也可以使用時標來執行此操作。