d3中图表大小自适应区域大小

d3中的图表是使用SVG绘制的，所以图表适应实质还是SVG的自适应大小。

为此，对于图表的父元素比如div.container 元素，自然就是使用类似百分比布局的方式实现放缩：

.container{height:80%;width:80%;
}

那么其中的svg元素就是类似这样的样式：

svg{height:100%;width:100%;
}

绘制SVG时候代码改为如下：

var svg = d3.select(".container").append("svg").attr("preserveAspectRatio", "xMidYMid meet").attr("viewBox", "0 0 400 400")

而不是常规的：

...
.attr("width", "400")
.attr("height", "400")

具体实现原理可自行查询关于preserveAspectRatio 和 viewBox 的详细内容，可以理解为对整体实现了放大缩小，因为我们没有在其它地方修改关于width 和 height 的代码。

效果：

参考链接：
http://stackoverflow.com/questions/16265123/resize-svg-when-window-is-resized-in-d3-js
http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

此文档的作者：justforuse
Github Pages：justforuse

d3中图表大小自适应区域大小相关推荐

picturebox显示服务器图片大小,WinForm中实现picturebox自适应图片大小的方法
本文实例讲述了winform中实现picturebox自适应图片大小的方法.分享给大家供大家参考,具体如下: picturebox控件共有两种载入图片方式,分别为: picturebox1.backg ...
QT中在label中插入图片自适应label大小等比缩放
一.代码如下 QImage *img_mainicon;//主图标显示在右上角lable中img_mainicon =new QImage;//新建一个image对象img_mainicon-> ...
Photoshop - 怎么让画布大小自适应图像大小？
使用Photoshop设计好图像后,如果想要画布的大小刚好适合图像的大小,该如何去操作呢?下面介绍详细操作步骤. 方法 / 步骤 1.打开Photoshop软件,进入到要调整画布大小的文档中,进入文档 ...
使用rem，使字体大小自适应屏幕
rem是CSS3新增的一个相对单位(root em,根em).这个单位与em区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素.这个单位可谓集相对大小和绝对大小的优点 ...
html5纯css字体大小自适应设置
css 字体大小自适应样式设置篇字体可以设置大小使用css font-size来实现,有时需要对字体大小根据浏览器分辨率来判断后自适应大小. 在CSS 2.0中字体大小自适应是难实现的,一般使用JS ...
echarts 坐标自适应_echarts 同一页面，多个图表页面大小自适应
// 路径配置 require.config({ paths: { echarts: './js' } }); // 使用 require( [ 'echarts', 'echarts/chart/l ...
5 控件固定大小_【聊技术】在Android中实现自适应文本大小显示
本周的聊技术话题和大家说说如何在Android中实现自适应文本大小显示. 想象一下,在布局中,通常显示文本的区域大小是固定的,但是文本长度并不总是固定的.比如列表中的文章标题.界面下方的按钮文本等等. ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
【聊技术】在Android中实现自适应文本大小显示
本周的聊技术话题和大家说说如何在Android中实现自适应文本大小显示. 想象一下,在布局中,通常显示文本的区域大小是固定的,但是文本长度并不总是固定的.比如列表中的文章标题.界面下方的按钮文本等等. ...

d3中图表大小自适应区域大小

d3中图表大小自适应区域大小相关推荐

最新文章

热门文章