Ubah ukuran svg ketika jendela diubah ukurannya di d3.js

Saya menggambar sebar dengan d3.js. Dengan bantuan pertanyaan ini:
Dapatkan ukuran layar, halaman web saat ini dan jendela browser

Saya menggunakan jawaban ini:

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;

Jadi saya dapat memasukkan plot saya ke jendela pengguna seperti ini:

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

Sekarang saya ingin sesuatu mengatur ukuran plot ketika pengguna mengubah ukuran jendela.

PS: Saya tidak menggunakan jQuery dalam kode saya.

Cari 'SVG responsif' sangat mudah untuk membuat SVG responsif dan Anda tidak perlu khawatir tentang ukuran lagi.

Inilah cara saya melakukannya:

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>

Catatan: Segala sesuatu di gambar SVG akan berskala dengan lebar jendela. Ini termasuk lebar dan ukuran font stroke (bahkan yang diatur dengan CSS). Jika ini tidak diinginkan, ada solusi alternatif yang lebih terlibat di bawah ini.

Info lebih lanjut / tutorial:

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

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

Gunakan window.onresize :

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/

UPDATE cukup gunakan cara baru dari @cminatti

jawaban lama untuk tujuan bersejarah

IMO lebih baik menggunakan select () dan on () karena dengan begitu Anda dapat memiliki beberapa event handler ukuran ... hanya jangan terlalu gila

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/

Agak jelek jika kode pengubahan ukuran hampir sepanjang kode untuk membangun grafik di tempat pertama. Jadi alih-alih mengubah ukuran setiap elemen dari bagan yang ada, mengapa tidak me-reloadnya saja? Inilah cara kerjanya untuk saya:

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

Garis yang penting adalah d3.select('svg').remove();. Jika tidak, setiap pengubahan ukuran akan menambahkan elemen SVG lain di bawah yang sebelumnya.

Dalam tata letak paksa, cukup atur atribut 'tinggi' dan 'lebar' tidak akan berfungsi untuk memusatkan kembali / memindahkan plot ke wadah svg. Namun, ada jawaban yang sangat sederhana yang berfungsi untuk Force Layouts yang ditemukan di sini . Singkatnya:

Gunakan acara yang sama (apa saja) yang Anda suka.

window.on('resize', resize);

Maka dengan asumsi Anda memiliki variabel svg & force:

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

Dengan cara ini, Anda tidak membuat ulang grafik sepenuhnya, kami mengatur atribut dan menghitung ulang hal-hal yang diperlukan. Setidaknya ini berfungsi saat Anda menggunakan titik gravitasi. Saya tidak yakin apakah itu prasyarat untuk solusi ini. Adakah yang bisa mengkonfirmasi atau menyangkal?

Ceria, g

Bagi mereka yang menggunakan grafik gaya langsung di D3 v4 / v5, sizemetode ini tidak ada lagi. Sesuatu seperti yang berikut ini bekerja untuk saya (berdasarkan masalah github ini ):

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();

Jika Anda ingin mengikat logika khusus untuk mengubah ukuran acara, saat ini Anda dapat mulai menggunakan API browser ResizeObserver untuk kotak pembatas dari SVGElement.
Ini juga akan menangani kasus ketika wadah diubah ukurannya karena perubahan ukuran elemen di dekatnya.
Ada polyfill untuk dukungan browser yang lebih luas.

Ini adalah cara kerjanya di komponen UI:

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/[email protected]/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()