vue中 d3/svg流程图根据窗口缩放，设置动态宽度高度或者样式

在开发过程中，很多时候都会用到动态的计算的样式，比如宽度，高度。特别是开发后台管理系统。

那么首先你务必看Vue的官方文档。涉及到的基础知识有：

• 绑定内联样式的使用
• computed的使用

文档写的都是基础使用。那么在项目实战中如何使用，2步就能实现，下面提供一个参考方案：

需求场景：获取当前元素宽度，设置container div的可滚动区域范围。

1.添加样式绑定

   div标签内动态绑定：:style="{minWidth: resizeWidth}"

  <div id="chart_wrapper" ref="chart_wrapper" style="overflow:auto;" >
     <div id="svg_container" :style="{minWidth: resizeWidth}" >
        <svg width="100%" height="400" ref="svg_wrapper"></svg>
     </div>
  </div>

2. 浏览器窗口缩放，大小改变时，触发 onresize 事件，然后 获取父级div宽度，设置container div的可滚动区域范围。

  此处实现方案：获取svg流程图里，最右侧圆的横坐标，设置动态resizeWidth值，动态添加滚动条

 mounted() {
    window.onresize = () => {
     let cWidth = this.$refs['svg_wrapper'].clientWidth;
     //this.circle为svg画布里，所有圆数据集合数组，遍历查找最右侧圆横坐标值
         if(this.circles.length!==0){
          //此方法为判断数组对象属性最大值
          const maxWidth = Math.max.apply(Math,this.circles.map(item => { 
            return item.x 
          }));
          if(maxWidth > cWidth){
           this.resizeWidth = (maxWidth + 52) + 'px';
      } 
   }
  },

3.效果图：当窗口缩放时，如果div宽度小于最右侧circle横坐标，出现滚动条，否则无滚动条