假设我有一个直方图脚本,可以构建 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 https://gist.github.com/993912
还有另一种方法可以做到这一点,不需要重新绘制图形,并且涉及修改viewBox http://www.w3.org/TR/SVGTiny12/coords.html#ViewBoxAttribute and 保留纵横比 http://www.w3.org/TR/SVGTiny12/coords.html#PreserveAspectRatioAttribute上的属性<svg>
元素:
<svg id="chart" viewBox="0 0 960 500"
preserveAspectRatio="xMidYMid meet">
</svg>
2015 年 11 月 24 日更新:大多数现代浏览器都可以推断长宽比 http://www.w3.org/TR/SVG/coords.html#IntrinsicSizingSVG 元素的数量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 内容将自动缩放。您可以看到一个工作示例(经过一些修改)here http://jsfiddle.net/shawnbot/BJLe6/:只需调整窗口或右下窗格的大小即可查看其反应。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)