CODEWITHSUNDEEP
javascriptd3.jshyperlinktreenodes
yogi
yogi

Reputation: 111

D3JS blink link

I am using d3js collapsible tree. https://bl.ocks.org/mbostock/4339083

How to make link blink(flash)? Can nodes also be made to show/hide at regular interval? I hope it can be done without using setInterval.

Thanks in advance

Upvotes: 0

Views: 531

Answers (1)

Ian
Ian

Reputation: 34509

To make the links "blink" you'll want to use a transition. Honestly there's nothing wrong with setInterval, in fact I'd probably use it for ease.

Firstly you want the animation. It'd difficult to know what you mean by "blink" so I'm going to assume gets brighter for now - but you can change this up however you wish.

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

This will gradually change the style to white over a period of 500ms. Now you need to revert the color back to the original. You can do this using the end event on the transition object.

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

Note that in the above this is the HTMLElement that the transition was running on. You can do this with a lambda (arrow function) if need be but you need to do (d, i, elements) => d3.select(elements[i]);

Now you've got you're transition, which resets. But you want to call it regularly. Honestly, the easiest way to do this is using setInterval... So your final code would look like:

// 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);

Upvotes: 1

Related Questions