Zmień rozmiar svg, gdy okno jest zmieniane w d3.js

Użyj okna .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 wystarczy użyć nowego sposobu z @cminatti

Stara odpowiedź do celów historycznych

IMO lepiej jest użyć select () i on (), ponieważ w ten sposób można mieć wiele procedur obsługi zdarzeń zmiany rozmiaru... just don ' t get too crazy

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 budowania wykresu na pierwszym miejscu. Zamiast zmieniać rozmiar każdego elementu istniejącego wykresu, dlaczego nie po prostu go przeładować? Oto jak to u 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...
}

Linia kluczowa to d3.select('svg').remove();. W przeciwnym razie każda zmiana rozmiaru spowoduje dodanie kolejnego elementu SVG poniżej poprzedniego.

W obowiązujących układach samo ustawienie atrybutów "wysokość" i "szerokość" nie będzie działać, aby ponownie wyśrodkować / przenieść wykres do kontenera svg. Istnieje jednak bardzo prosta odpowiedź, która działa dla układów siłowych znalezionych TUTAJ . W skrócie:

Użyj tego samego (dowolnego) WKKW, które lubisz.

window.on('resize', resize);

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

W ten sposób, nie renderujemy grafu całkowicie, ustawiamy atrybuty i D3 ponownie oblicza rzeczy, jeśli jest to konieczne. To w najmniej działa, gdy używasz punktu ciężkości. Nie jestem pewien, czy jest to warunek wstępny dla tego rozwiązania. Czy ktoś może potwierdzić lub zaprzeczyć ?

Używam window.innerWidth dla szerokości i okna klienta.innerHeight dla wzrostu klienta.