Задержка до следующего элемента данных, добавление один за другим, раз за разом - PullRequest
Новая
       7

Задержка до следующего элемента данных, добавление один за другим, раз за разом

1 голос
/ 12 октября 2019

Мне нужно только задержать круги (в среднем один за другим), но это delay() игнорируется. 

  D3_svg.selectAll().data(lst).enter().append("circle")
  .attr('cx', d => d.x).attr('cy', d => d.y)  // position
  .attr("r", 10).style("fill","red")          // layout
  .transition().delay(2000)                   // time to the next

Существует множество сложных предложений ( пример ) с использованием таймера. и т. д. Мне нужно самое простое .

1 Ответ

1 голос
/ 13 октября 2019

Хотя можно буквально добавлять элементы последовательно, с задержкой, необходимый код будет слишком громоздким для D3, и вы в конечном итоге будете наклоняться назад: мне кажется, что все выхотите, чтобы элементы показывались на экране последовательно, один за другим. Они могут быть добавлены одновременно.

В таком случае мы будем использовать простой selection.transition. Однако нам нужно перевести некоторый атрибут: нельзя перевести несуществование в существование , это имеет мало смысла.

Самым простым способом отображения элемента на экране является изменение его непрозрачности. Для задержки достаточно функции, которая принимает индекс (второй аргумент) элементов. Например, один элемент каждую 1 секунду: 

.delay(function (_,i){
    return i * 1000
});

Вот базовая демонстрация: 

d3.select("svg").selectAll(null)
  .data(d3.range(50).map(() => [Math.random() * 300, Math.random() * 150]))
  .enter()
  .append("circle")
  .attr("r", 5)
  .style("fill", "teal")
  .style("stroke", "white")
  .attr("cx", d => d[0])
  .attr("cy", d => d[1])
  .style("opacity", 0)
  .transition()
  .duration(0)
  .delay(function(_, i) {
    return i * 200
  })
  .style("opacity", 1)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
...