使 d3.js可视化布局具有响应性的最佳方法是什么？

javascript responsive-design d3.js

2022-08-30 00:47:01

假设我有一个直方图脚本，用于构建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

答案 1

还有另一种方法可以做到这一点，不需要重绘图形，它涉及修改viewBox并保留元素上的AspectRatio属性：<svg>

<svg id="chart" viewBox="0 0 960 500"
  preserveAspectRatio="xMidYMid meet">
</svg>

2015 年 11 月 24 日更新：大多数现代浏览器都可以从中推断出 SVG 元素的纵横比，因此您可能不需要使图表的大小保持最新。如果需要支持较旧的浏览器，可以在窗口调整大小时调整元素大小，如下所示：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内容将自动缩放。您可以在此处看到一个工作示例（经过一些修改）：只需调整窗口或右下窗格的大小即可查看它的反应。

答案 2

寻找“响应式SVG”，使SVG响应式非常简单，您再也不必担心大小。

以下是我是如何做到的：

d3.select("div#chartId")
   .append("div")
   .classed("svg-container", true) //container class to make it responsive
   .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);

CSS 代码：

.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;
}

http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php