响应式 D3 js 图表 [重复]

Posted 2023-02-22

【中文标题】响应式 D3 js 图表 [重复]

【英文标题】：Responsive D3 js chart [duplicate]

【发布时间】：2015-11-07 11:52:35

【问题描述】：

我正在尝试使 D3js 图表具有响应性，但无法使其正常工作。想知道你们能帮忙。

网站是http://www.vizualytic.com/

d3js图表在首页

【问题讨论】：

谢谢。查看jfire.io/animations 获取大量酷炫的 d3 动画艺术

不知道那个网站，太棒了:) 谢谢

【参考方案1】：

为您的 SVG 元素设置 width=100% 和 height=100% 以及 viewBox 和 preserveAspectRatio 属性。

以下解决方案将为您指明方向，

var svg = d3.select('#chart').append("svg")
    .attr("width", '100%')
    .attr("height", '100%')
    .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
    .attr('preserveAspectRatio','xMinYMin')
    .append("g") ;

【讨论】：

我已经尝试过这种方法，它似乎工作得非常好，而且不费吹灰之力！ 'preserveAspectRatio' 做所有工作的图表的其余部分是否有任何副作用？那么宽度和高度变量呢？他们应该参考什么？或者我可以只选择随机数吗？