javascript - if i pre-render d3js charts on the server, how will their width/height be calculated? -
i have website sends 7 megs of json data client, d3 (actually dimplejs) charts rendered. page getting pretty slow , doesn't work in browsers.
i'm thinking of rendering svg in server, instead of having client browser it. i've seen several references technique. however, since labels, bar widths , many elements depend pixel height , width of chart, , these dimensions not known until client's browser renders page, how people handle such issues?
i'm not web/front-end developer don't know if i'm missing obvious or if assumptions wrong.
the simplest thing take rendered <svg>
, add viewbox
attribute it. allows specify how want browser scale/stretch or crop <svg>
when it's placed inside parent container (eg <div>
).
anything beyond — selectively scaling or repositioning text or rects or axes — can achieved "hard" way; i.e. code has awareness of chart's semantics , programmatically alters svg attributes react container size.
finally, , long-shot: if have full control of output (i'm guessing don't, since you're using dimple), attempt using combination of absolute , percentage units size , position things, as conceptually demonstrated here
Comments
Post a Comment