D3 selection.append("image") from a cached response

Question

I have a force directed layout which i want to improve to append images to nodes based on a property. As such, when the data scales to a large number of devices and I refresh a lot I'm in danger of generating a lot of calls for the images if I use xlink URIs.

Do you know if its possible (or indeed the normal behaviour) to cache responses. Alternatively is it possible to store all the images in a variable (a lot of them are duplicated) and populate the image element with data from the variable?

Thanks!

I have done some more digging and it looks like xlink hrefs are not cached by the browser. However, you can use data URIs in SVG elements and embed base64 files within that. So you could have a js process download all your images into an array and then use that as a cache. For me that is fine in that it will be 10-15 images downloaded once and the browser will cope. Also see http://stackoverflow.com/questions/6249664/does-svg-support-embedding-of-bitmap-images — zuzzy, May 07 '13 at 14:32

score 1 · Accepted Answer · answered May 23 '13 at 16:05

1

Marking this as closed as I seemed to have solved the issue

...you can use data URIs in SVG elements and embed base64 files within that. So you could have a js process download all your images into an array and then use that as a cache. For me that is fine in that it will be 10-15 images downloaded once and the browser will cope

Thx

answered May 23 '13 at 16:05

zuzzy

301
2
16

Can you provide an example of how you ended up doing this? – poliu2s Aug 22 '16 at 06:30

D3 selection.append("image") from a cached response

1 Answers1