ci sono due vie:
-ridisegnare tutto al cambiamento della finestra o meglio, scrivere in js già pensando che la pagina sarà responsive.
Oppure:
-usare hw  o vh , ovvero misure calcolate in base alla finestra nei css3
.attr(“width”, “100hw”)
.attr(“height”, “auto”)
-css3 media query con differenti transform:scale(0.5);
Oppure:
-usare svg come vanno usate (ma non tutti i browser sono d’accordo):
https://www.w3.org/TR/SVG/coords.html#IntrinsicSizinghttps://www.w3.org/TR/SVGTiny12/coords.html#ViewBoxAttribute
_________SPIEGAZIONE:
allora, la domanda che ci facevamo l’altro giorno è come avere i grafici fatti con D3 e  in rwd.
La risposta numero uno è scriverli pensandoli responsive.
Ammettendo che non li hai scritti tu ,ma vuoi una soluzione rapida ed indolore… ho tre trucchi che funzionano al momento:
il primo è settare l’svg iniziale su hw e/o hv, che sono due misure css3 relativamente nuove ma adottate da tutti i browser.
Da 1 a 100 ti misurano la larghezza/altezza della pagina.
quindi 50hw, significa: fammelo metà della grandezza della finestra.
Quindi nel js del grafico, gli vai ad aggiungere:
var svg = d3.select("body").append("svg")
.attr("width", "100hw")
.attr("height", "auto")
.append("g")
ES: http://albero.redup.xyz/bubble/datascuole/index3.html
Se dal tuo browser non funge, fammi sapere che browser e versione è , perchè a me risulta che vada su tutto.
Secondo trick:
Usare le mediaquery e transform:scale(0.5);
Significa fammelo uguale nelle proporzioni, ma grande la metà.
E’ più macchinoso perchè deve decidere tu gli scatti.
es, se hai una svg di 900px per 900px, puoi decidere che sotto i 900px la fai grande la metà , quindi a 450px,
e poi con un’altra media query decidi che sotto i 450px la fai grande un quarto, quindi arrivi a 225px e quindi visualizzabile su tutto.
Se vuoi essere visto anche da browser “arretrati”, ricordati di copiare 3 volte la regola css che gli dai ed aggiungergli i prefissi:
-webkit-transform, -o-transform, -moz-transform
Io lo faccio principalmente principalmente per gli android 4.0 che sono ancora stra diffusi ed usano un webkit vecchio.
es:
@media screen and (max-width: 900px){
svg{
transform:scale(0.5);
-webkit-transform:scale(0.5);
margin: -25%;
}
}
@media screen and (max-width: 450px){
svg{
transform:scale(0.2);
-webkit-transform:scale(0.2);
margin: -70%;
}
#legend:after{content:"torna a visualizzarlo con un PC o scaricalo come pdf";}
}
Terzo paciugo a cui ho pensato ,ma poi non ho applicato perchè mi sembra un po troppo sporco, rimane quindi una ipotesi:
metto un iframe, con dentro uno dei grafici, ma senza regole di viewport nei meta. Quindi verra fatto vedere in miniatura dentro alla sua finestra e sarà possibile zommarlo a mano, come un sito non responsive 😛
///////////////
Letture:
https://www.safaribooksonline.com/blog/2014/02/17/building-responsible-visualizations-d3-js/
http://blog.webkid.io/responsive-chart-usability-d3/
http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive
http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/