假设我有一个构建 960 500 svg 图形的直方图脚本。如何使这个响应调整图形宽度和高度是动态的?
<script> var n = 10000, // number of trials m = 10, // number of random variables data = []; // Generate an Irwin-Hall distribution. for (var i = 0; i < n; i++) { for (var s = 0, j = 0; j < m; j++) { s += Math.random(); } data.push(s); } var histogram = d3.layout.histogram() (data); var width = 960, height = 500; var x = d3.scale.ordinal() .domain(histogram.map(function(d) { return d.x; })) .rangeRoundBands([0, width]); var y = d3.scale.linear() .domain([0, d3.max(histogram.map(function(d) { return d.y; }))]) .range([0, height]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); svg.selectAll("rect") .data(histogram) .enter().append("rect") .attr("width", x.rangeBand()) .attr("x", function(d) { return x(d.x); }) .attr("y", function(d) { return height - y(d.y); }) .attr("height", function(d) { return y(d.y); }); svg.append("line") .attr("x1", 0) .attr("x2", width) .attr("y1", height) .attr("y2", height); </script>
完整示例直方图要点是: https ://gist.github.com/993912
还有另一种不需要重绘图形的方法,它涉及修改元素的viewBox和preserveAspectRatio属性:<svg>
<svg>
<svg id="chart" viewBox="0 0 960 500" preserveAspectRatio="xMidYMid meet"> </svg>
2015 年 11 月 24 日更新 :大多数现代浏览器可以从 中推断SVG 元素的纵横比viewBox,因此您可能不需要更新图表的大小。如果您需要支持旧版浏览器,您可以在窗口调整大小时调整元素的大小,如下所示:
viewBox
var aspect = width / height, chart = d3.select('#chart'); d3.select(window) .on("resize", function() { var targetWidth = chart.node().getBoundingClientRect().width; chart.attr("width", targetWidth); chart.attr("height", targetWidth / aspect); });
并且 svg 内容将自动缩放。您可以在这里看到一个工作示例(有一些修改):只需调整窗口或右下窗格的大小以查看它的反应。