960 500 svg grafik oluşturur histogram bir senaryo var varsayalım. Nasıl yeniden boyutlandırma grafik genişlikleri ve Yükseklikleri dinamik yani bu duyarlı yapabilirim?

<script> 

var n = 10000, // number of trials
    m = 10,    // number of random variables
    data = [];

// Generate an Irwin-Hall distribution.
for (var i = 0; i < n; i  ) {
  for (var s = 0, j = 0; j < m; j  ) {
    s  = Math.random();
  }
  data.push(s);
}

var histogram = d3.layout.histogram()
    (data);

var width = 960,
    height = 500;

var x = d3.scale.ordinal()
    .domain(histogram.map(function(d) { return d.x; }))
    .rangeRoundBands([0, width]);

var y = d3.scale.linear()
    .domain([0, d3.max(histogram.map(function(d) { return d.y; }))])
    .range([0, height]);

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

svg.selectAll("rect")
    .data(histogram)
  .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("x", function(d) { return x(d.x); })
    .attr("y", function(d) { return height - y(d.y); })
    .attr("height", function(d) { return y(d.y); });

svg.append("line")
    .attr("x1", 0)
    .attr("x2", width)
    .attr("y1", height)
    .attr("y2", height);

</script> 

Histogram özü buydu tam bir örnek: https://gist.github.com/993912

Grafik çizim gerektirmez bunu yapmak için başka bir yol var, ve viewBox preserveAspectRatio <svg> öğesi özniteliklerini değiştirmeyi içerir:

<svg id="chart" width="960" height="500"
  viewBox="0 0 960 500"
  preserveAspectRatio="xMidYMid">
</svg>

Eğer (960, 500) sınırları içinde grafik çizerseniz sonra, yapmanız gereken tüm yeniden boyutlandırma <svg> element:

var aspect = 960 / 500,
    chart = $("#chart");
$(window).on("resize", function() {
    var targetWidth = chart.parent().width();
    chart.attr("width", targetWidth);
    chart.attr("height", targetWidth / aspect);
});

Ve svg içeriğini otomatik olarak ölçeklendirilmesi. Bu çalışma bir örnek (bazı değişikliklerle) here görebilirsiniz: pencereyi yeniden boyutlandırmak veya sağ alt nasıl tepki verdiğini görmek için bölmesinde.