График перемещения строки с d3.js

Question

Я использую d3.js для создания графика, показывающего данные, которые периодически обновляются (один раз в секунду) в линейном графике. Ось x (время) и весь график непрерывно переводятся влево.

я попытался ее на основе этого урока: http://bost.ocks.org/mike/path/

Это jsfiddle то, что я до сих пор: http://jsfiddle.net/panbert/dmynvjzx/

Он работает. Но в способе обновления (последний метод в части Javascript)

//move the graph left 
svg.selectAll(".line") 
    .attr("d", line(data)) 
    .attr("transform", null) 
    .transition() 
    .duration(950) 
    .ease("linear") 
    .attr("transform", "translate(" + (x(0) - x(1000)) + ")"); 

Я использую длительность 950 мс для перехода, который переводит график на 1 секунду влево. В учебнике задержка для перехода составляет 1 секунду, что имеет больше смысла для меня. Каждую секунду график перемещается на 1 секунду, перевод которого длится в течение одной секунды. Это звучит логичнее перевода, который занимает 950 миллисекунд.

Если я увеличиваю продолжительность перевода в jsfiddle до 1 секунды в строке 161 (как в учебнике), я получаю графические ошибки, и он больше не работает так, как предполагается.

Может кто-нибудь объяснить мне, почему это так?

Answer 1

Причина вы вызываете функцию обновления после каждого 1 секунда

setInterval(update, 1000); 

и продолжительность для перехода определяется

svg.selectAll(".line") 
     .attr("d", line(data)) 
     .attr("transform", null) 
     .transition() 
     .duration(950)//this means that the transition will take 950 mili secs which is less than the update rate. 

Но когда вы делаете длительность 1 сек точно так, как обновить его будет не дает вам эффекта перехода, потому что переход не прошел, и вы обновляете путь новыми значениями.

svg.selectAll(".line") 
     .attr("d", line(data)) 
     .attr("transform", null) 
     .transition() 
     .duration(1000)//this means that the transition will take 1000 

Так что лучше всего было бы, когда вы даете ДлИтЕлЬНОСтЬ 1000 (1сек) скорость обновления дают чуть более 1 сек сказать (1.1sec)

setInterval(update, 1100); 

Рабочий код here

Надеюсь, это поможет!