Pencere yeniden boyutlandırılabilir olduğunda yeniden boyutlandırmak svg d3.js

SORU

28 NİSAN 2013, Pazar

Pencere yeniden boyutlandırılabilir olduğunda yeniden boyutlandırmak svg d3.js

D3.js bir dağılım grafiğini çiziyorum. Bu soru : yardımıyla
how to get web page size, browser window size, screen size in a cross-browser way?

Bu cevap kullanıyorum :

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

Bu gibi kullanıcının penceresine benim uydur halledebilirim :

var svg = d3.select("body").append("svg")
        .attr("width", x)
        .attr("height", y)
        .append("g");

Şimdi bir kullanıcı pencereyi yeniden boyutlandırmak konu ne zaman yeniden boyutlandırma ilgilenir istiyorum.

PS : benim kod jQuery kullanmıyorum.

CEVAP

22 EYLÜL 2014, PAZARTESİ

'Duyarlı SVG oldukça basit bir SVG duyarlı olun ve boyutları konusunda endişelenmenize artık gerek yok. arayın

Nasıl yaptığımı burada

d3.select("div#chartId")
   .append("div")
   .classed("svg-container", true) //container class to make it responsive
   .append("svg")
   //responsive SVG needs these 2 attributes and no width and height attr
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 600 400")
   //class to make it responsive
   .classed("svg-content-responsive", true);

CSS kod:

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
}