2

I'm using Vis.js to draw network diagrams. I'd like to be able to have a notification feature that when an AJAX update is received for a specific node the canvas moves that node to the center (which Vis.js can already do) and then have some type of bullseye animation over the node to draw the users attention until they click the node. The closest example to the animation effect I'm looking for is at http://codepen.io/MateiGCopot/pen/ogEKRK 

var w = c.width = 400,
h = c.height = 400,
ctx = c.getContext('2d'),

frame = 0;

function anim(){
  window.requestAnimationFrame(anim);

  ++frame;

  for(var i = 0; i < w; ++i){
    ctx.strokeStyle = i%20 === 0 ? 'hsl(hue, 80%, 50%)'.replace('hue',
        (360 / (w/3) * i - frame) % 360
    ) : 'rgba(0, 0, 0, .08)';
    ctx.beginPath();
    ctx.arc(w/2, h/2, (i + frame)%w/2, 0, Math.PI*2);
    ctx.stroke();
    ctx.closePath();
  }
}
anim();

Is this the best way to achieve this type of effect? Running it on my machine makes the CPU usage spike so it doesn't seem to be that efficient.
Also, how can I integrate something like this with Vis.js so it draws over an image node and will stop when the node is clicked? This particular example draws the circles outward however, I'd like them to be drawn inwards but couldn't figure out how to change the direction.

JavaScript is not my strong suite so the more detailed the explanation the better. Also, I'm not specifically tied to Vis.js so if there is another library that already has this functionality (along with comparable Vis.js features) I'd be alright with switching.

laaposto
  • 11,835
  • 15
  • 54
  • 71
  • I'm curious about this as well and generally how to manipulate node content, such as custom .js animations and pure html. – tkelly Feb 25 '15 at 23:14

1 Answers1

2

I'm the developer of the visjs network view. This is not possible yet within the public API. We are working on a version 4.0 that will allow you to easily inject your own code inside the renderloop. If you need it sooner (we expect 4.0 around April) please post an issue on our GitHub page and I can help you insert this into the source yourself. We would like to keep all our questions on GitHub so it is easier for people to find answers.

Edit: additionally you could of course just change the color and or use the focus functionality to focus on the node. But that was not your question. A workaround could be to overlay a div on top op the node, where the doc could have a gif with the animation and a click handler. You can get the position of said node using the vis API.

AlexDM0
  • 561
  • 4
  • 6
  • Cool. I can wait until April as I'm just doing some PoC's right now. But I like the div gif idea or what I was thinking was just dynamically change the node's image property. Downside being that I need two images for every node type I want to display an animation over but on the upside, I think it'd be easy. That is, if there is a way to change the node's image dynamically. –  Mar 04 '15 at 00:48
  • You can change anything dynamically with the vis datasets. We plan to release 4.0 in about 1 - 2 weeks from now. Documentation takes much longer than expected! – AlexDM0 May 07 '15 at 10:47
  • hi @Alexdm.Is there any documentation available now. – Shashank Mar 26 '17 at 13:32
  • Thanks @Alexdm. I am facing problem of drawing on clicking node function.Please help! – Shashank Mar 27 '17 at 20:35
  • I am not maintaining visjs any more. I suggest you post an issue on github so the new maintainers can assist you. Cheers – AlexDM0 Mar 28 '17 at 21:38