D3, is there any way to transition through an existing graph point by point?

Question

I was trying to find an example for something that I need to do, and unfortunately I have not found one. I have a scatter plot that I created, and the plot is just fine. However, I am subscribing to a message, and each time I get that message, I need to find the point on the graph relating to the message, and make it larger. When I transition to the next point, that point goes back to original size and I resize the new point.

Basically, it's a time series plot that every 5 seconds when I get the message, I advance one point (for now). The thing is, the selectAll is an array of arrays. So, I guess where my issue is, I'm not sure where to use .attr("r", size).

In my subscribe handler (callback), I check that the graph was created first, then I get all of the "points". From there, nothing was working.

Thanks for any help!

Answer 1

Ideally, the data in your message is in the same format as the data used to generate the scatterplot. Then you can rebind the data in the message to your points and use the selection.update function to resize just the updated datapoint.

Alternative you could use the selectAll function and filter only the elements you'd like to resize with the selection.filter function .

It would be helpful if you had a pastebin example of your script if you want more specific help.