如何使流图响应式（d3.js）？

Posted 2023-02-22

【中文标题】如何使流图响应式（d3.js）？

【英文标题】：How to make a stream graph responsive (d3.js)?

【发布时间】：2013-11-23 21:03:38

【问题描述】：

我正在为我的公司使用 d3.js 制作流图，我想知道如何使它具有响应性。我的代码和这个例子没有太大区别：http://bl.ocks.org/mbostock/4060954

我一直在尝试设置 viewBox="0 0 height width" 和 preserveAspectRatio = "xMinYMid meet" 无济于事。

有什么建议吗？

【问题讨论】：

响应式是什么意思？您能否创建一个 jsfiddle 或发布您正在使用的代码？

我认为她的意思是在调整容器大小时制作 SVG 比例。

你见过this question吗？

@HenrikHelmers，是的，这正是我的意思。

@THK 我的意思是我应该能够调整窗口大小，并且 svg 应该缩放并保持比例。通常，我会在百分比上下文中使用 svg。所以，d3 让我陷入了一个循环，因为在数学中使用了高度和宽度。我没有做小提琴，因为它会是多余的。我的和那个 mbostock 例子之间只有一个微不足道的区别。请注意，该示例无法很好地调整大小。

【参考方案1】：

所以，这个问题的解决方案是这个 jsfiddle：

http://jsfiddle.net/shawnbot/BJLe6/ 具体来说，这段代码：

var chart = $("#chart"),
aspect = chart.width() / chart.height(),
container = chart.parent();

$(window).on("resize", function() 
var targetWidth = container.width();
chart.attr("width", targetWidth);
chart.attr("height", Math.round(targetWidth / aspect));
).trigger("resize");

感谢所有帮助过的人！