D3.js'de pencere yeniden boyutlandırıldığında svg'yi yeniden boyutlandır

Ben d3.js ile bir dağılım grafiği çiziyorum. Bu sorunun yardımıyla:
Ekranın boyutunu, geçerli web sayfasını ve tarayıcı penceresini alın

Bu cevabı 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;

Böylece grafiğimi kullanıcının penceresine şu şekilde sığdırabilirim:

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

Şimdi bir şey kullanıcı pencereyi yeniden boyutlandırırken arsa yeniden boyutlandırma ilgilenir istiyorum.

PS: Kodumda jQuery kullanmıyorum.

'Duyarlı SVG'yi arayın Bir SVG'yi duyarlı hale getirmek oldukça basittir ve artık boyutlar hakkında endişelenmenize gerek yok.

İşte nasıl yaptım:

d3.select("div#chartId")
   .append("div")
   // Container class to make it responsive.
   .classed("svg-container", true) 
   .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)
   // Fill with a rectangle for visualization.
   .append("rect")
   .classed("rect", true)
   .attr("width", 600)
   .attr("height", 400);

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

svg .rect {
  fill: gold;
  stroke: steelblue;
  stroke-width: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<div id="chartId"></div>

Not: SVG görüntüsündeki her şey pencere genişliği ile ölçeklenir. Bu, kontur genişliğini ve yazı tipi boyutlarını (CSS ile ayarlanmış olanlar dahil) içerir. Bu istenmiyorsa, aşağıda daha fazla alternatif çözümler vardır.

Daha fazla bilgi / eğitim:

http://thenewcode.com/744/Make-SVG-Responsive

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

Window.onresize komutunu kullanın :

function updateWindow(){
    x = w.innerWidth || e.clientWidth || g.clientWidth;
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    svg.attr("width", x).attr("height", y);
}
d3.select(window).on('resize.updatesvg', updateWindow);

http://jsfiddle.net/Zb85u/1/

GÜNCELLEME sadece @cminatti'den yeni yolu kullan

tarihi amaçlar için eski cevap

IMO select () ve on () kullanmak daha iyidir, çünkü bu şekilde birden fazla yeniden boyutlandırma olay işleyicisi olabilir ...

d3.select(window).on('resize', resize); 

function resize() {
    // update width
    width = parseInt(d3.select('#chart').style('width'), 10);
    width = width - margin.left - margin.right;

    // resize the chart
    x.range([0, width]);
    d3.select(chart.node().parentNode)
        .style('height', (y.rangeExtent()[1] + margin.top + margin.bottom) + 'px')
        .style('width', (width + margin.left + margin.right) + 'px');

    chart.selectAll('rect.background')
        .attr('width', width);

    chart.selectAll('rect.percent')
        .attr('width', function(d) { return x(d.percent); });

    // update median ticks
    var median = d3.median(chart.selectAll('.bar').data(), 
        function(d) { return d.percent; });

    chart.selectAll('line.median')
        .attr('x1', x(median))
        .attr('x2', x(median));


    // update axes
    chart.select('.x.axis.top').call(xAxis.orient('top'));
    chart.select('.x.axis.bottom').call(xAxis.orient('bottom'));

}

http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/

Yeniden boyutlandırma kodu neredeyse grafiği ilk etapta oluşturmak için kod kadar uzunsa çirkin. Öyleyse mevcut grafiğin her öğesini yeniden boyutlandırmak yerine, neden sadece yeniden yüklemiyorsunuz? Benim için böyle çalıştı:

function data_display(data){
   e = document.getElementById('data-div');
   var w = e.clientWidth;
   // remove old svg if any -- otherwise resizing adds a second one
   d3.select('svg').remove();
   // create canvas
   var svg = d3.select('#data-div').append('svg')
                                   .attr('height', 100)
                                   .attr('width', w);
   // now add lots of beautiful elements to your graph
   // ...
}

data_display(my_data); // call on page load

window.addEventListener('resize', function(event){
    data_display(my_data); // just call it again...
}

Önemli olan d3.select('svg').remove();. Aksi takdirde, her yeniden boyutlandırma bir öncekinin altına başka bir SVG öğesi ekleyecektir.

Kuvvet mizanpajlarında sadece 'height' ve 'width' niteliklerinin ayarlanması, grafiği yeniden ortalamak / svg konteynerine taşımak için çalışmaz. Bununla birlikte, burada bulunan Force Layouts için çalışan çok basit bir cevap var . Özetle:

Beğendiğiniz aynı (herhangi bir) etkinliği kullanın.

window.on('resize', resize);

Sonra svg & force değişkenlerine sahip olduğunuzu varsayarsak:

var svg = /* D3 Code */;
var force = /* D3 Code */;    

function resize(e){
    // get width/height with container selector (body also works)
    // or use other method of calculating desired values
    var width = $('#myselector').width(); 
    var height = $('#myselector').height(); 

    // set attrs and 'resume' force 
    svg.attr('width', width);
    svg.attr('height', height);
    force.size([width, height]).resume();
}

Bu şekilde, grafiği tamamen yeniden oluşturmazsınız, öznitelikleri ayarlarız ve d3 işleri gerektiği gibi yeniden hesaplar. Bu en azından bir yerçekimi noktası kullandığınızda işe yarar. Bunun bu çözüm için bir ön koşul olup olmadığından emin değilim. Herhangi biri doğrulayabilir veya reddedebilir mi ?

Şerefe, g

D3 v4 / v5'te zorla yönlendirilen grafikler kullananlar için sizeyöntem artık mevcut değil. Aşağıdaki gibi bir şey benim için çalıştı ( bu github sorununa dayanarak ):

simulation
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("x", d3.forceX(width / 2))
    .force("y", d3.forceY(height / 2))
    .alpha(0.1).restart();

Özel mantığı yeniden boyutlandırma olayına bağlamak istiyorsanız, günümüzde bir SVGElement öğesinin sınırlayıcı kutusu için ResizeObserver tarayıcı API'sını kullanmaya başlayabilirsiniz .
Bu, yakındaki öğelerin boyut değişikliği nedeniyle konteyner yeniden boyutlandırıldığında da durumu ele alır. Daha geniş tarayıcı desteği için
bir çoklu dolgu var .

UI bileşeninde şu şekilde çalışabilir:

function redrawGraph(container, { width, height }) {
  d3
    .select(container)
    .select('svg')
    .attr('height', height)
    .attr('width', width)
    .select('rect')
    .attr('height', height)
    .attr('width', width);
}

// Setup observer in constructor
const resizeObserver = new ResizeObserver((entries, observer) => {
  for (const entry of entries) {
    // on resize logic specific to this component
    redrawGraph(entry.target, entry.contentRect);
  }
})

// Observe the container
const container = document.querySelector('.graph-container');
resizeObserver.observe(container)

.graph-container {
  height: 75vh;
  width: 75vw;
}

.graph-container svg rect {
  fill: gold;
  stroke: steelblue;
  stroke-width: 3px;
}

<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

<figure class="graph-container">
  <svg width="100" height="100">
    <rect x="0" y="0" width="100" height="100" />
  </svg>
</figure>

// unobserve in component destroy method
this.resizeObserver.disconnect()