vue整合D3.js,并折叠树的样式

整合D3.js和Vue.js可以使用vue-d3库，它提供了一些常用的D3.js图表组件和指令。

对于折叠树样式，可以使用D3.js的树形布局（tree layout）来实现。大致步骤如下：

1. 安装vue-d3库。可以使用npm或yarn安装，命令如下：

   npm install vue-d3
   # 或者
   yarn add vue-d3

2. 在Vue组件中引入vue-d3库和D3.js库。

   import VueD3 from 'vue-d3'
   import * as d3 from 'd3'

3. 在Vue组件中定义数据和布局。

   data() {
     return {
       treeData: {
         name: 'A',
         children: [
           {
             name: 'B',
             children: [
               { name: 'D' },
               { name: 'E' }
             ]
           },
           {
             name: 'C',
             children: [
               { name: 'F' },
               { name: 'G' }
             ]
           }
         ]
       }
     }
   },
   computed: {
     treeLayout() {
       return d3.tree().size([this.height, this.width])(d3.hierarchy(this.treeData))
     }
   },

4. 在Vue组件模板中使用vue-d3库提供的指令来绘制树形结构。

   <div v-d3:svg="'tree'" :d3-data="treeLayout.descendants()" :d3-transform="'translate(80,40)'">
     <g v-d3:node="'g'" v-for="node in treeLayout.descendants()" :key="node.data.name" :d3-transform="`translate(${node.y},${node.x})`">
       <circle v-d3:shape="'circle'" :r="4.5"></circle>
       <text v-d3:text="node.data.name" :x="node.children ? -8 : 8" :text-anchor="node.children ? 'end' : 'start'" :dominant-baseline="node.children ? 'end' : 'hanging'"></text>
     </g>
     <g v-d3:link="'g'" v-for="link in treeLayout.links()" :key="link.source.data.name + '-' + link.target.data.name" :d3-transform="'translate(80,40)'">
       <path v-d3:shape="'path'" :d="`M${link.source.y},${link.source.x}V${link.target.x}H${link.target.y}`" fill="none" stroke="#ccc"></path>
     </g>
   </div>

5. 添加CSS样式来美化树形结构。

   .node circle {
     fill: #fff;
     stroke: #ccc;
     stroke-width: 1.5px;
   }
   .node text {
     font: 10px sans-serif;
   }
   .link {
     fill: none;
     stroke: #ccc;
     stroke-width: 1.5px;
   }

6. 添加折叠/展开功能。

在树形数据中添加一个`collapsed`属性，用来表示当前节点是否折叠。在模板中添加点击事件，切换节点的`collapsed`属性，并重新计算树形布局。

   <div v-d3:svg="'tree'" :d3-data="treeLayout.descendants()" :d3-transform="'translate(80,40)'">
     <g v-d3:node="'g'" v-for="node in treeLayout.descendants()" :key="node.data.name" :d3-transform="`translate(${node.y},${node.x})`">
       <circle v-d3:shape="'circle'" :r="4.5" @click="toggle(node)"></circle>
       <text v-d3:text="node.data.name" :x="node.children ? -8 : 8" :text-anchor="node.children ? 'end' : 'start'" :dominant-baseline="node.children ? 'end' : 'hanging'" @click="toggle(node)"></text>
     </g>
     <g v-d3:link="'g'" v-for="link in treeLayout.links()" :key="link.source.data.name + '-' + link.target.data.name" :d3-transform="'translate(80,40)'">
       <path v-d3:shape="'path'" :d="`M${link.source.y},${link.source.x}V${link.target.x}H${link.target.y}`" fill="none" stroke="#ccc"></path>
     </g>
   </div>

   methods: {
     toggle(node) {
       node.data.collapsed = !node.data.collapsed
       this.update()
     },
     update() {
       this.$refs.svg.update()
     }
   },
   computed: {
     treeLayout() {
       const root = d3.hierarchy(this.treeData)
       root.descendants().forEach(node => {
         node.data.collapsed = false
       })
       root.eachBefore(node => {
         if (node.data.collapsed && node.parent) {
           node.children = null
         }
       })
       return d3.tree().size([this.height, this.width])(root)
     }
   },

注意：这里的`svg`指令需要通过`ref`属性来获取DOM元素并调用`update()`方法来更新布局。