我正在用 d3.js 绘制散点图。在这个问题的帮助下：
获取屏幕大小、当前网页和浏览器窗口
我正在使用这个答案：
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;
所以我可以像这样将我的情节适合用户的窗口：
var svg = d3.select("body").append("svg")
.attr("width", x)
.attr("height", y)
.append("g");
现在我希望在用户调整窗口大小时可以调整绘图大小。
PS：我没有在我的代码中使用 jQuery。
寻找“响应式 SVG”，使 SVG 响应式非常简单，您不必再担心尺寸。
这是我如何做到的：
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>注意： SVG 图像中的所有内容都将随窗口宽度缩放。这包括笔画宽度和字体大小（即使是那些用 CSS 设置的）。如果不希望这样，下面有更多涉及的替代解决方案。
更多信息/教程：
http://thenewcode.com/744/Make-SVG-Responsive
http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php
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);
更新只是使用@cminatti 的新方法
出于历史目的的旧答案
IMO 最好使用 select() 和 on() 因为这样你可以有多个调整大小的事件处理程序......只是不要太疯狂
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/
如果调整大小的代码几乎与首先构建图形的代码一样长，那就有点难看。因此，与其调整现有图表的每个元素的大小，为什么不简单地重新加载它呢？这是它对我的工作方式：
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...
}
关键线是d3.select('svg').remove();。否则，每次调整大小都会在前一个元素下方添加另一个 SVG 元素。
在强制布局中，简单地设置“高度”和“宽度”属性将无法将绘图重新居中/移动到 svg 容器中。然而，有一个非常简单的答案，对于力布局的作品找到这里。总之：
使用您喜欢的相同（任何）事件。
window.on('resize', resize);
然后假设你有 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();
}
通过这种方式，您不必完全重新渲染图形，我们设置属性，d3 会根据需要重新计算。这至少在您使用重力点时有效。我不确定这是否是此解决方案的先决条件。任何人都可以确认或否认吗？
干杯，克