d3中动态给svg加滚动条

一、前言

            Echarts、HighCharts这两个构建可视化图表库相信大家都用过，它们对于一些柱状图，折线图，饼图，热力图等都能很好的展现出来，所以前端展示图表基本都用它们。

            最近项目上有个需求，要求画一个从左向右散开的思维导图（单向树状图）。以前用过Echarts和HighCharts，所以这次想要尝试一下用d3画图。大致样式如下

样例展示

二、问题

            具体怎么画的在这里就不展示，可以参考d3里面的示例，里面有详细代码--d3树状图示例地址。对于数据量小的时候，单页面是可以完全展示的。但是，当数据量大的时候，画布展示不全，并且不出现滚动条。这当然不算把一个完整的功能展示完全，于是开始了探索之路。

三、解决svg不出现滚动条问题

            首先想到的则是通过html+css给svg外层父元素加自适应滚动条，通过css属性实现

css样式

但这种方式不行，主要不是overflow没有生效，而是svg元素没有被子元素撑开，svg是给了viewBox属性，其中宽高是设置成父元素的宽高的。

svg设置

既然给父元素加overflow属性不行，就想给svg加此属性，试了之后，依旧是不行。

            屡战屡败，就得屡败屡战了。首先，不出现滚动条的原因是svg没有被撑开，而svg没有被撑开的原因是设置了固定的宽高，所以这里的宽高不能设置成固定的。

            不设定成固定的，就得在mounted里面获取svg里面的元素宽高然后赋值给svg。但是此项目的需求是，每一下级数据是通过点击事件动态获取的，就是说下层数据是未知的，宽高也是未知的，不能在mounted里面就给svg写死宽高。应该在update函数，即更新视图的时候重新赋值svg宽高。

            有了这个思路，现在要解决的就是svg的宽高有哪些元素决定，从上图样例展示可知宽由文字位置的x最大值决定，高由圆点y的最大值决定。这样，每次update的时候计算宽高的最大值。

获取高度最大值

赋值

至此，滚动条就能动态出现

完美！！！