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/ - вам нужно будет обновить прогнозы и разбор атрибутов When в соответствии с вашей структурой кода/данных.

---

Конечно, можно было бы сделать это, используя шкалы времени, если вы получаете объекты времени даты.