if i pre-render d3js charts on the server, how will their width/height be calculated?

Question

I have a website which sends about 7 megs of json data to the client, where d3 (actually dimplejs) charts are rendered. The page is getting to be pretty slow and simply doesn't work in some browsers.

I'm thinking of rendering the svg in the server, instead of having the client browser do it. I've seen several references this technique. However, since labels, bar widths and so many elements depend the pixel height and width of the chart, and these dimensions are not known until client's browser renders the page, how do people handle such issues?

I'm not a web/front-end developer normally so I don't know if I'm missing something obvious or if my assumptions are wrong.

Answer 1

The simplest thing is to take the rendered <svg> and add a viewBox attribute to it. That allows you to specify how you want the browser to scale/stretch or crop the <svg> when it's placed inside a parent container (eg <div> ).

Anything beyond that — like selectively scaling or repositioning text or rects or axes — can only be achieved the "hard" way; ie with code that has some awareness of the chart's semantics and programmatically alters certain svg attributes to react to container size.

Finally, and this is a long-shot: If you have full control of the output (I'm guessing your don't, since you're using dimple), you could attempt using a combination of absolute and percentage units to size and position things, as conceptually demonstrated here