Is there any reason why meteor is not displaying SVG elements created on the fly?



I’m creating 10,000 rect element every 30 sec. After a lot tries and different approaches I was able to displaying one time, after that nothing.

those 10,000 rect are rendered within a svg element, I can see (in development console) how those 10,000 are updated every 30 sec so everything seems to be OK, but they are not displayed.

any ideas???

thanks in advance! :smile:


can you gist your code ?

its hard to give you a hint without the code

i work with svgs in meteor(blaze) and it works fine but not that amount of elements.


this is my code (granted is NOT very meteor “friendly” but this is how I was able to display it at least the first time) and this is how it looks thanks for answering this post :smile:


I just skimmed through your code and can’t see a place where you remove those first 1000 elements. Might it be possible, that they new ones are created and not being visible, because they are “rendered” outside the view area.

d3.js is handling huge amounts of svg elements and that quite smoothly and integratable into your meteor app. You might look into their code, for how they are approaching it.


@crenshininbon, thanks for replying to this thread, I delete those svg element in line 82, I’ll check d3.js. thanks again! :smile:


this is my guess

your broswer cannot render that many svg in one go in 30 secs

i’ve done SVGs to the DOM and with 2000 elements, it can take several minutes to render

so the total render time for that number is possibly greater than 30 secs, thus you never see anthing

also, as er above suggestiuions… it could be worth looking at d3 for the way in enter/exits only changed items

and, if you don’t require any interaction, it is much quicker to render with canvas


@garrilla it makes kind of sense, right now I have a working copy with div’s and buttons and refresh every 30 sec. I switched to SVG because I thought it was faster. I’m looking into d3.js.

thanks for your reply I appreciate your input!