Thay đổi kích thước svg khi cửa sổ được thay đổi kích thước trong d3.js

Tôi đang vẽ một biểu đồ phân tán với d3.js. Với sự trợ giúp của câu hỏi này:
Nhận kích thước của màn hình, trang web hiện tại và cửa sổ trình duyệt

Tôi đang sử dụng câu trả lời này:

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;

Vì vậy, tôi có thể điều chỉnh cốt truyện của mình với cửa sổ của người dùng như thế này:

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

Bây giờ tôi muốn một cái gì đó quan tâm đến việc thay đổi kích thước cốt truyện khi người dùng thay đổi kích thước cửa sổ.

PS: Tôi không sử dụng jQuery trong mã của mình.

Hãy tìm 'SVG đáp ứng' khá đơn giản để tạo một SVG đáp ứng và bạn không phải lo lắng về kích thước nữa.

Đây là cách tôi đã làm nó:

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>

Ghi chú: Mọi thứ trong ảnh SVG sẽ chia tỷ lệ với chiều rộng cửa sổ. Điều này bao gồm chiều rộng nét và kích thước phông chữ (ngay cả những người được đặt bằng CSS). Nếu điều này là không mong muốn, có nhiều giải pháp thay thế liên quan dưới đây.

Thêm thông tin / hướng dẫn:

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

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

Sử dụng 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/

CẬP NHẬT chỉ sử dụng cách mới từ @cminatti

câu trả lời cũ cho mục đích lịch sử

IMO tốt hơn là sử dụng select () và on () vì theo cách đó bạn có thể có nhiều trình xử lý sự kiện thay đổi kích thước ... đừng quá điên rồ

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/

Thật là xấu xí nếu mã thay đổi kích thước gần như là mã để xây dựng biểu đồ ở vị trí đầu tiên. Vì vậy, thay vì thay đổi kích thước mọi yếu tố của biểu đồ hiện có, tại sao không chỉ cần tải lại nó? Đây là cách nó làm việc cho tôi:

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

Dòng quan trọng là d3.select('svg').remove();. Nếu không, mỗi lần thay đổi kích thước sẽ thêm một phần tử SVG khác bên dưới phần tử trước đó.

Trong bố trí lực lượng, chỉ cần đặt các thuộc tính 'chiều cao' và 'chiều rộng' sẽ không hoạt động để căn giữa / di chuyển cốt truyện vào thùng chứa svg. Tuy nhiên, có một câu trả lời rất đơn giản phù hợp với Bố cục lực lượng được tìm thấy ở đây . Tóm tắt:

Sử dụng cùng (bất kỳ) sự kiện bạn muốn.

window.on('resize', resize);

Sau đó, giả sử bạn có các biến Svg & lực lượng:

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

Theo cách này, bạn không kết xuất lại biểu đồ hoàn toàn, chúng tôi đặt các thuộc tính và d3 tính lại mọi thứ khi cần thiết. Điều này ít nhất hoạt động khi bạn sử dụng một điểm trọng lực. Tôi không chắc đó có phải là điều kiện tiên quyết cho giải pháp này không. Bất cứ ai có thể xác nhận hay từ chối ?

Chúc mừng, g

Đối với những người sử dụng biểu đồ hướng lực trong D3 v4 / v5, sizephương thức này không còn tồn tại nữa. Một cái gì đó giống như sau đã làm việc cho tôi (dựa trên vấn đề github này ):

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

Nếu bạn muốn liên kết logic tùy chỉnh để thay đổi kích thước sự kiện, hiện tại bạn có thể bắt đầu sử dụng API trình duyệt ResizeObserver cho hộp giới hạn của một SVGEuity.
Điều này cũng sẽ xử lý trường hợp khi container được thay đổi kích thước do thay đổi kích thước phần tử gần đó.
Có một polyfill để hỗ trợ trình duyệt rộng hơn.

Đây là cách nó có thể hoạt động trong thành phần 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/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()