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

                       

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

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

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

    
    
1
    
    
2
    
    
3
    
    
4
   
   

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

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

    
    
1
    
    
2
    
    
3
    
    
4
   
   

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

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

    
    
1
    
    
2
    
    
3
    
    
4
   
   

而不是常规的：

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

    
    
1
    
    
2
    
    
3
   
   

具体实现原理可自行查询关于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

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow