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;
}

Daha fazla bilgi / öğreticiler:

http://demosthenes.info/blog/744/Make-SVG-Responsive

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Break

    Break

    10 Aralık 2005
  • ModNation Racers H.Q.

    ModNation Ra

    31 Ocak 2010
  • Tomas N

    Tomas N

    14 Kasım 2010