假设我有一个直方图脚本,可构建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>
还有另一种方法,不需要重新绘制图形,它涉及修改元素上的viewBox和preserveAspectRatio属性<svg>:
<svg>
<svg id="chart" width="960" height="500" viewBox="0 0 960 500" preserveAspectRatio="xMidYMid meet"> </svg>
15年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的内容将自动缩放。您可以在此处看到一个有效的示例(进行了一些修改):只需调整窗口或右下窗格的大小即可查看其反应。