Zmień rozmiar svg, gdy rozmiar okna zostanie zmieniony w d3.js

Rysuję wykres rozrzutu za pomocą d3.js. Za pomocą tego pytania:
Uzyskaj rozmiar ekranu, bieżącą stronę internetową i okno przeglądarki

Korzystam z tej odpowiedzi:

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;

Jestem w stanie dopasować moją fabułę do okna użytkownika w następujący sposób:

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

Teraz chciałbym, żeby coś zmieniło rozmiar działki, gdy użytkownik zmieni rozmiar okna.

PS: Nie używam jQuery w moim kodzie.

Poszukaj „responsive SVG”. Utworzenie responsywnego SVG jest dość proste i nie musisz się już martwić o rozmiary.

Oto jak to zrobiłem:

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>

Uwaga: wszystko na obrazie SVG będzie skalowane wraz z szerokością okna. Obejmuje to szerokość obrysu i rozmiary czcionek (nawet te ustawione za pomocą CSS). Jeśli nie jest to pożądane, poniżej znajdziesz więcej zaangażowanych alternatywnych rozwiązań.

Więcej informacji / tutoriale:

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

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

Użyj 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/

AKTUALIZACJA wystarczy użyć nowej metody z @cminatti

stara odpowiedź do celów historycznych

IMO lepiej jest używać select () i on (), ponieważ w ten sposób możesz mieć wiele programów obsługi zdarzeń zmiany rozmiaru ... po prostu nie denerwuj się

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/

To trochę brzydkie, jeśli kod zmiany rozmiaru jest prawie tak długi, jak kod do budowy wykresu na pierwszym miejscu. Więc zamiast zmieniać rozmiar każdego elementu istniejącego wykresu, dlaczego po prostu nie załadować go ponownie? Oto jak to dla mnie działało:

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

Kluczową linią jest d3.select('svg').remove();. W przeciwnym razie każda zmiana rozmiaru doda kolejny element SVG poniżej poprzedniego.

Obowiązujące układy po prostu ustawienie atrybutów „wysokość” i „szerokość” nie będzie działać w celu ponownego wyśrodkowania / przeniesienia wykresu do kontenera svg. Istnieje jednak bardzo prosta odpowiedź, która działa dla układów siły znalezionych tutaj . W podsumowaniu:

Użyj tego samego (dowolnego) wydarzenia, które ci się podoba.

window.on('resize', resize);

Zakładając, że masz zmienne svg i 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();
}

W ten sposób nie renderujesz całkowicie wykresu, ustawiamy atrybuty i d3 ponownie oblicza rzeczy w razie potrzeby. Działa to przynajmniej wtedy, gdy używasz punktu ciężkości. Nie jestem pewien, czy jest to warunek wstępny tego rozwiązania. Czy ktoś może potwierdzić lub zaprzeczyć?

Pozdrawiam, g

Dla tych, którzy używają wykresów skierowanych na siłę w D3 v4 / v5, sizemetoda już nie istnieje. Działało dla mnie coś takiego: (w oparciu o ten problem z github ):

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

Jeśli chcesz powiązać niestandardową logikę w celu zmiany rozmiaru zdarzenia, w dzisiejszych czasach możesz zacząć używać interfejsu API przeglądarki ResizeObserver do ramki granicznej SVGElement.
Będzie to również obsługiwać przypadek, gdy rozmiar kontenera zostanie zmieniony z powodu zmiany rozmiaru pobliskich elementów.
Istnieje polifill dla szerszej obsługi przeglądarki.

Oto jak to może działać w komponencie interfejsu użytkownika:

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