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

  • Glyn Dewis

    Glyn Dewis

    25 AĞUSTOS 2007
  • kimaliz

    kimaliz

    18 Temmuz 2006
  • mist64

    mist64

    30 Mayıs 2006