SORU
22 ŞUBAT 2012, ÇARŞAMBA


En iyi yolu d3.js görselleştirme bir düzen unsuru nedir?

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

CEVAP
2 Mart 2012, Cuma


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.

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

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • MotoManTV

    MotoManTV

    10 Aralık 2009
  • Orson Wang

    Orson Wang

    28 EKİM 2006
  • wwjoshdu

    wwjoshdu

    18 ŞUBAT 2011