使 d3.js 可视化布局响应的最佳方法是什么? [英] What's the best way to make a d3.js visualisation layout responsive?
问题描述
假设我有一个构建 960 500 svg 图形的直方图脚本.我如何使这种响应式调整图形宽度和高度是动态的?
Assume I have a histogram script that builds a 960 500 svg graphic. How do I make this responsive so on resize the graphic widths and heights are dynamic?
<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
Full example histogram gist is: https://gist.github.com/993912
推荐答案
还有另一种不需要重新绘制图形的方法,它涉及修改 viewBox 和 属性:
There's another way to do this that doesn't require redrawing the graph, and it involves modifying the viewBox and preserveAspectRatio attributes on the <svg>
element:
<svg id="chart" viewBox="0 0 960 500"
preserveAspectRatio="xMidYMid meet">
</svg>
更新 11/24/15:大多数现代浏览器都可以从 viewBox
推断 SVG 元素的纵横比,因此您可能不需要使图表的大小保持最新.如果您需要支持旧版浏览器,您可以在窗口调整大小时调整元素大小,如下所示:
Update 11/24/15: most modern browsers can infer the aspect ratio of SVG elements from the viewBox
, so you may not need to keep the chart's size up to date. If you need to support older browsers, you can resize your element when the window resizes like so:
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 内容将自动缩放.您可以在此处看到一个工作示例(经过一些修改):只需调整窗口大小或右下窗格查看它的反应.
And the svg contents will be scaled automatically. You can see a working example of this (with some modifications) here: just resize the window or the bottom right pane to see how it reacts.
这篇关于使 d3.js 可视化布局响应的最佳方法是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!