D3JS мигает ссылка

Question

Я использую складное дерево d3js. https://bl.ocks.org/mbostock/4339083

Как заставить ссылку мигать (мигать)? Можно ли сделать так, чтобы узлы показывались / скрывались через регулярные промежутки времени? Я надеюсь, что это можно сделать без использования setInterval.

Заранее спасибо

Answer 1

Чтобы сделать ссылки "мигать", вы хотите использовать переход. Честно говоря, нет ничего плохого в setInterval, на самом деле я бы, вероятно, использовал его для простоты.

Сначала вы хотите анимацию. Было бы трудно понять, что вы подразумеваете под «миганием», поэтому я собираюсь предположить, что сейчас это становится ярче, но вы можете изменить это так, как пожелаете.

d3.select("svg")
  .selectAll(".link")
  .transition()
  .duration(500) // miliseconds
  .style("stroke", "white"); 

Это постепенно изменит стиль на white в течение 500 мс. Теперь вам нужно вернуть цвет обратно к оригиналу. Вы можете сделать это, используя событие end объекта перехода.

.on("end", function() {
   d3.select(this).style("stroke", "#CCC");
});

Обратите внимание, что выше this - это HTMLElement, на котором выполнялся переход. Вы можете сделать это с помощью лямбды (функция стрелки), если это необходимо, но вам нужно сделать (d, i, elements) => d3.select(elements[i]);

Теперь у вас есть переход, который сбрасывается. Но вы хотите регулярно звонить. Честно говоря, самый простой способ сделать это - использовать setInterval ... Итак, ваш окончательный код будет выглядеть так:

// Create the regular interval
setInterval(() => {
    d3.select("svg")
      .selectAll(".link")
      .transition()
      .duration(500) // miliseconds
      .style("stroke", "white")
      .on("end", function() {
          d3.select(this).style("stroke", "#CCC");
      });

}, 1000);