vue d3 svg tree树状图

20 篇文章 1 订阅

用的是d3.v3 版本

展示没有问题,细节有问题。

采用的是自己的json,调接口的没有总结,太麻烦了。
下面地址是原声的,支持提示框可复制文字,并且节点之间不会重叠,tree.size 改成 tree.nodeSize 即可


 https://blog.csdn.net/czy279470138/article/details/88419831

 

<style>
    
.tree{
  width: 100%;
  height: 1000px;
  background: #f8f8fb;
}
.node {
  cursor: pointer;
}

.node circle {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #999;
  stroke-width: 1.5px;
}

.tree svg {
  width: 100%;
  height: 100%;
}
</style>
<div id="tree"></div>



import * as d3 from 'd3'

import tagImg1 from '@/assets/svg/tag1.svg'

export default {
    data() {
        return {
          index: 0,
          duration: 750,
          root: null
        }
    },
  mounted() {
    this.width = document.getElementById('tree').offsetWidth
    this.height = document.getElementById('tree').offsetHeight

    this.zoom = d3.behavior.zoom().scaleExtent([0.1, 100]).on('zoom', this.zoomed)
    this.svg = d3.select('body').select('#tree').append('svg')
      .call(this.zoom)
      .append('g')
      .call(this.zoom)
      .append('g')
      .attr('transform', 'translate(100,0)')

    this.root = this.getNode()
    this.update(this.root)
  },
  methods: {
    getNode() {
      this.root = dataSet
      this.root.x0 = this.height / 2
      this.root.y0 = 0

      this.root.children.forEach(this.collapse)
      return this.root
    },

    zoomed() {
      this.svg.attr('transform',
        'translate(' + this.zoom.translate() + ')' +
        'scale(' + this.zoom.scale() + ')'
      )
    },

    collapse(d) {
      // console.log(d)
      if (d.children) {
        d._children = d.children
        d._children.forEach(this.collapse)
        d.children = null
        // console.log(3)
      }
    },

    toggle(d) {
      // console.log(d)
      if (d.children) {
        console.log(1)
        d._children = d.children
        d.children = null
      } else {
        d.children = d._children
        d._children = null
        console.log(2)
      }
      this.update(d)
    },
    
    update(source) {
      const tree = d3.layout.tree().size([this.height, this.width])
      var nodes = tree.nodes(this.root).reverse()
      var links = tree.links(nodes)

      // console.log(nodes)

      nodes.forEach(function(d) {
        d.y = d.depth * 180
      })
      var node = this.svg.selectAll('g.node')
        .data(nodes, d => {
          return d.id || (d.id = ++this.index)
        })
      // console.log(source.x0)

      // console.log(nodes)
      var nodeEnter = node.enter().append('g')
        .attr('class', 'node')
        .attr('transform', d => {
          // console.log(d) // 打印所展示的
          // console.log(i)
          return 'translate(' + source.y0 + ',' + source.x0 + ')'
        })
        .on('click', this.toggle)
      // console.log(nodeEnter) //4个数组

      const img_w = 20
      const img_h = 20
      nodeEnter.append('image')
        .attr('width', img_w)
        .attr('height', img_h)
        .attr('y', -10)
        .attr('x', -5)
        .attr('xlink:href', this.tagImg1)

      // nodeEnter.append('circle')
      //   .attr('r', 0)
      //   .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff' })

      nodeEnter.append('text')
        .attr('x', function(d) { return d.children || d._children ? -14 : 14 })
        .attr('dy', '.35em')
        .attr('text-anchor', function(d) { return d.children || d._children ? 'end' : 'start' })
        .text(function(d) { return d.name })
        .style('fill-opacity', 0)

      nodeEnter.append('text')
        .attr('x', function(d) { return d.children || d._children ? 20 : 0 })
        .attr('y', function(d) { return d.children || d._children ? 25 : 20 })
        .attr('dy', '.35em')
        .attr('text-anchor', function(d) { return d.children || d._children ? 'end' : 'start' })
        .text(function(d) { return d.name })
        .style('fill-opacity', 1)
        .style('font-size', '12px')

      // console.log(this.root)
      var nodeUpdate = node.transition()
        .duration(this.duration)
        .attr('transform', d => {
          return 'translate(' + d.y + ',' + d.x + ')'
        })

      // nodeUpdate.select('circle')
      //   .attr('r', 8)
      //   .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff' })

      nodeUpdate.select('text')
        .style('fill-opacity', 1)

      var exitNodes = node.exit().transition()
        .duration(this.duration)
        .attr('transform', d => {
          return 'translate(' + source.y + ',' + source.x + ')'
        })
        .remove()

      exitNodes.select('circle')
        .attr('r', 0)

      exitNodes.select('text')
        .style('fill-opacity', 0)

      var linkUpdate = this.svg.selectAll('.link')
        .data(links, d => { return d.target.id })

      var linkEnter = linkUpdate.enter()

      var linkExit = linkUpdate.exit()

      var diagonal = d3.svg.diagonal()
        .projection(d => { return [d.y, d.x] })

      linkEnter.insert('path', '.node')
        .attr('class', 'link')
        .attr('d', d => {
          var o = { x: source.x0, y: source.y0 }
          return diagonal({ source: o, target: o })
        })
        .transition()
        .duration(this.duration)
        .attr('d', diagonal)

      linkUpdate.transition()
        .duration(this.duration)
        .attr('d', diagonal)

      linkExit.transition()
        .duration(this.duration)
        .attr('d', d => {
          var o = { x: source.x, y: source.y }
          return diagonal({ source: o, target: o })
        })
        .remove()

      nodes.forEach(function(d) {
        d.x0 = d.x
        d.y0 = d.y
      })
    }
}


}

 

const dataSet = {
  'name': '中国',
  'children':
    [
      {
        'name': '3B、',
        'children':
          [
            { 'name': '杭州',
              'children': [
                { 'name': '宁波',
                  'children': [
                    { 'name': '宁波',
                      'children': [
                        { 'name': '温州',
                          'children': [
                            { 'name': '温州',
                              'children': [
                                { 'name': '温州',
                                  'children': [
                                    { 'name': '宁波',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州' },
                                            { 'name': '绍兴' }
                                          ]
                                        },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '温州' },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '绍兴' }
                          ]
                        },
                        { 'name': '绍兴' }
                      ]
                    },
                    { 'name': '温州' },
                    { 'name': '绍兴' }
                  ]
                },
                { 'name': '温州' }
              ]
            },
            { 'name': '宁波' },
            { 'name': '温州' },
            { 'name': '绍兴' }
          ]
      },

      {
        'name': '广西',
        'children':
          [
            {
              'name': '桂林',
              'children':
                [
                  { 'name': '秀峰区' },
                  { 'name': '叠彩区' },
                  { 'name': '象山区' },
                  { 'name': '七星区' },
                  {
                    'name': '浙江',
                    'children':
                      [
                        { 'name': '杭州',
                          'children': [
                            { 'name': '宁波',
                              'children': [
                                { 'name': '宁波',
                                  'children': [
                                    { 'name': '温州',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '宁波',
                                                  'children': [
                                                    { 'name': '温州',
                                                      'children': [
                                                        { 'name': '温州',
                                                          'children': [
                                                            { 'name': '温州' },
                                                            { 'name': '绍兴' }
                                                          ] },
                                                        { 'name': '绍兴' }
                                                      ] },
                                                    { 'name': '绍兴' }
                                                  ]
                                                },
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ]
                                            },
                                            { 'name': '绍兴' }
                                          ]
                                        },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '温州' },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '温州' }
                          ]
                        },
                        { 'name': '宁波' },
                        { 'name': '温州' },
                        { 'name': '绍兴' }
                      ]
                  },
                  {
                    'name': '浙江',
                    'children':
                      [
                        { 'name': '杭州',
                          'children': [
                            { 'name': '宁波',
                              'children': [
                                { 'name': '宁波',
                                  'children': [
                                    { 'name': '温州',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '宁波',
                                                  'children': [
                                                    { 'name': '温州',
                                                      'children': [
                                                        { 'name': '温州',
                                                          'children': [
                                                            { 'name': '温州' },
                                                            { 'name': '绍兴' }
                                                          ] },
                                                        { 'name': '绍兴' }
                                                      ] },
                                                    { 'name': '绍兴' }
                                                  ]
                                                },
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ]
                                            },
                                            { 'name': '绍兴' }
                                          ]
                                        },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '温州' },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '温州' }
                          ]
                        },
                        { 'name': '宁波' },
                        { 'name': '温州' },
                        { 'name': '绍兴' }
                      ]
                  },
                  {
                    'name': '浙江',
                    'children':
                      [
                        { 'name': '杭州',
                          'children': [
                            { 'name': '宁波',
                              'children': [
                                { 'name': '宁波',
                                  'children': [
                                    { 'name': '温州',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '宁波',
                                                  'children': [
                                                    { 'name': '温州',
                                                      'children': [
                                                        { 'name': '温州',
                                                          'children': [
                                                            { 'name': '温州' },
                                                            { 'name': '绍兴' }
                                                          ] },
                                                        { 'name': '绍兴' }
                                                      ] },
                                                    { 'name': '绍兴' }
                                                  ]
                                                },
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ]
                                            },
                                            { 'name': '绍兴' }
                                          ]
                                        },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '温州' },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '温州' }
                          ]
                        },
                        { 'name': '宁波' },
                        { 'name': '温州' },
                        { 'name': '绍兴' }
                      ]
                  },
                  {
                    'name': '浙江',
                    'children':
                      [
                        { 'name': '杭州',
                          'children': [
                            { 'name': '宁波',
                              'children': [
                                { 'name': '宁波',
                                  'children': [
                                    { 'name': '温州',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '宁波',
                                                  'children': [
                                                    { 'name': '温州',
                                                      'children': [
                                                        { 'name': '温州',
                                                          'children': [
                                                            { 'name': '温州' },
                                                            { 'name': '绍兴' }
                                                          ] },
                                                        { 'name': '绍兴' }
                                                      ] },
                                                    { 'name': '绍兴' }
                                                  ]
                                                },
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ]
                                            },
                                            { 'name': '绍兴' }
                                          ]
                                        },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '温州' },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '温州' }
                          ]
                        },
                        { 'name': '宁波' },
                        { 'name': '温州' },
                        { 'name': '绍兴' }
                      ]
                  },
                  {
                    'name': '浙江',
                    'children':
                      [
                        { 'name': '杭州',
                          'children': [
                            { 'name': '宁波',
                              'children': [
                                { 'name': '宁波',
                                  'children': [
                                    { 'name': '温州',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '宁波',
                                                  'children': [
                                                    { 'name': '温州',
                                                      'children': [
                                                        { 'name': '温州',
                                                          'children': [
                                                            { 'name': '温州' },
                                                            { 'name': '绍兴' }
                                                          ] },
                                                        { 'name': '绍兴' }
                                                      ] },
                                                    { 'name': '绍兴' }
                                                  ]
                                                },
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ]
                                            },
                                            { 'name': '绍兴' }
                                          ]
                                        },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '温州' },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '温州' }
                          ]
                        },
                        { 'name': '宁波' },
                        { 'name': '温州' },
                        { 'name': '绍兴' }
                      ]
                  },
                  {
                    'name': '浙江',
                    'children':
                      [
                        { 'name': '杭州',
                          'children': [
                            { 'name': '宁波',
                              'children': [
                                { 'name': '宁波',
                                  'children': [
                                    { 'name': '温州',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '宁波',
                                                  'children': [
                                                    { 'name': '温州',
                                                      'children': [
                                                        { 'name': '温州',
                                                          'children': [
                                                            { 'name': '温州' },
                                                            { 'name': '绍兴' }
                                                          ] },
                                                        { 'name': '绍兴' }
                                                      ] },
                                                    { 'name': '绍兴' }
                                                  ]
                                                },
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ]
                                            },
                                            { 'name': '绍兴' }
                                          ]
                                        },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '温州' },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '温州' }
                          ]
                        },
                        { 'name': '宁波' },
                        { 'name': '温州' },
                        { 'name': '绍兴' }
                      ]
                  },
                  {
                    'name': '浙江',
                    'children':
                      [
                        { 'name': '杭州',
                          'children': [
                            { 'name': '宁波',
                              'children': [
                                { 'name': '宁波',
                                  'children': [
                                    { 'name': '温州',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '宁波',
                                                  'children': [
                                                    { 'name': '温州',
                                                      'children': [
                                                        { 'name': '温州',
                                                          'children': [
                                                            { 'name': '温州' },
                                                            { 'name': '绍兴' }
                                                          ] },
                                                        { 'name': '绍兴' }
                                                      ] },
                                                    { 'name': '绍兴' }
                                                  ]
                                                },
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ]
                                            },
                                            { 'name': '绍兴' }
                                          ]
                                        },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '温州' },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '温州' }
                          ]
                        },
                        { 'name': '宁波' },
                        { 'name': '温州' },
                        { 'name': '绍兴' }
                      ]
                  },
                  {
                    'name': '浙江',
                    'children':
                      [
                        { 'name': '杭州',
                          'children': [
                            { 'name': '宁波',
                              'children': [
                                { 'name': '宁波',
                                  'children': [
                                    { 'name': '温州',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '宁波',
                                                  'children': [
                                                    { 'name': '温州',
                                                      'children': [
                                                        { 'name': '温州',
                                                          'children': [
                                                            { 'name': '温州' },
                                                            { 'name': '绍兴' }
                                                          ] },
                                                        { 'name': '绍兴' }
                                                      ] },
                                                    { 'name': '绍兴' }
                                                  ]
                                                },
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ]
                                            },
                                            { 'name': '绍兴' }
                                          ]
                                        },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '温州' },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '温州' }
                          ]
                        },
                        { 'name': '宁波' },
                        { 'name': '温州' },
                        { 'name': '绍兴' }
                      ]
                  },
                  {
                    'name': '浙江',
                    'children':
                      [
                        { 'name': '杭州',
                          'children': [
                            { 'name': '宁波',
                              'children': [
                                { 'name': '宁波',
                                  'children': [
                                    { 'name': '温州',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '宁波',
                                                  'children': [
                                                    { 'name': '温州',
                                                      'children': [
                                                        { 'name': '温州',
                                                          'children': [
                                                            { 'name': '温州' },
                                                            { 'name': '绍兴' }
                                                          ] },
                                                        { 'name': '绍兴' }
                                                      ] },
                                                    { 'name': '绍兴' }
                                                  ]
                                                },
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ]
                                            },
                                            { 'name': '绍兴' }
                                          ]
                                        },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '温州' },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '温州' }
                          ]
                        },
                        { 'name': '宁波' },
                        { 'name': '温州' },
                        { 'name': '绍兴' }
                      ]
                  }
                ]
            },
            { 'name': '南宁' },
            { 'name': '柳州' },
            { 'name': '防城港' },
            {
              'name': '浙江',
              'children':
                [
                  { 'name': '杭州',
                    'children': [
                      { 'name': '宁波',
                        'children': [
                          { 'name': '宁波',
                            'children': [
                              { 'name': '温州',
                                'children': [
                                  { 'name': '温州',
                                    'children': [
                                      { 'name': '温州',
                                        'children': [
                                          { 'name': '宁波',
                                            'children': [
                                              { 'name': '温州',
                                                'children': [
                                                  { 'name': '温州',
                                                    'children': [
                                                      { 'name': '温州' },
                                                      { 'name': '绍兴' }
                                                    ] },
                                                  { 'name': '绍兴' }
                                                ] },
                                              { 'name': '绍兴' }
                                            ]
                                          },
                                          { 'name': '温州' },
                                          { 'name': '绍兴' }
                                        ]
                                      },
                                      { 'name': '绍兴' }
                                    ]
                                  },
                                  { 'name': '绍兴' }
                                ]
                              },
                              { 'name': '绍兴' }
                            ]
                          },
                          { 'name': '温州' },
                          { 'name': '绍兴' }
                        ]
                      },
                      { 'name': '温州' }
                    ]
                  },
                  { 'name': '宁波' },
                  { 'name': '温州' },
                  { 'name': '绍兴' }
                ]
            }
          ]
      },

      {
        'name': '黑龙江',
        'children':
          [
            { 'name': '哈尔滨' },
            { 'name': '齐齐哈尔' },
            { 'name': '牡丹江' },
            {
              'name': '浙江',
              'children':
                [
                  { 'name': '杭州',
                    'children': [
                      { 'name': '宁波',
                        'children': [
                          { 'name': '宁波',
                            'children': [
                              { 'name': '温州',
                                'children': [
                                  { 'name': '温州',
                                    'children': [
                                      { 'name': '温州',
                                        'children': [
                                          { 'name': '宁波',
                                            'children': [
                                              { 'name': '温州',
                                                'children': [
                                                  { 'name': '温州',
                                                    'children': [
                                                      { 'name': '温州' },
                                                      { 'name': '绍兴' }
                                                    ] },
                                                  { 'name': '绍兴' }
                                                ] },
                                              { 'name': '绍兴' }
                                            ]
                                          },
                                          { 'name': '温州' },
                                          { 'name': '绍兴' }
                                        ]
                                      },
                                      { 'name': '绍兴' }
                                    ]
                                  },
                                  { 'name': '绍兴' }
                                ]
                              },
                              { 'name': '绍兴' }
                            ]
                          },
                          { 'name': '温州' },
                          { 'name': '绍兴' }
                        ]
                      },
                      { 'name': '温州' }
                    ]
                  },
                  { 'name': '宁波' },
                  { 'name': '温州' },
                  { 'name': '绍兴' }
                ]
            },
            { 'name': '大庆' },
            {
              'name': '浙江',
              'children':
                [
                  { 'name': '杭州',
                    'children': [
                      { 'name': '宁波',
                        'children': [
                          { 'name': '宁波',
                            'children': [
                              { 'name': '温州',
                                'children': [
                                  { 'name': '温州',
                                    'children': [
                                      { 'name': '温州',
                                        'children': [
                                          { 'name': '宁波',
                                            'children': [
                                              { 'name': '温州',
                                                'children': [
                                                  { 'name': '温州',
                                                    'children': [
                                                      { 'name': '温州' },
                                                      { 'name': '绍兴' }
                                                    ] },
                                                  { 'name': '绍兴' }
                                                ] },
                                              { 'name': '绍兴' }
                                            ]
                                          },
                                          { 'name': '温州' },
                                          { 'name': '绍兴' }
                                        ]
                                      },
                                      { 'name': '绍兴' }
                                    ]
                                  },
                                  { 'name': '绍兴' }
                                ]
                              },
                              { 'name': '绍兴' }
                            ]
                          },
                          { 'name': '温州' },
                          { 'name': '绍兴' }
                        ]
                      },
                      { 'name': '温州' }
                    ]
                  },
                  { 'name': '宁波' },
                  { 'name': '温州' },
                  { 'name': '绍兴' }
                ]
            },
            {
              'name': '浙江',
              'children':
                [
                  { 'name': '杭州',
                    'children': [
                      { 'name': '宁波',
                        'children': [
                          { 'name': '宁波',
                            'children': [
                              { 'name': '温州',
                                'children': [
                                  { 'name': '温州',
                                    'children': [
                                      { 'name': '温州',
                                        'children': [
                                          { 'name': '宁波',
                                            'children': [
                                              { 'name': '温州',
                                                'children': [
                                                  { 'name': '温州',
                                                    'children': [
                                                      { 'name': '温州' },
                                                      { 'name': '绍兴' }
                                                    ] },
                                                  { 'name': '绍兴' }
                                                ] },
                                              { 'name': '绍兴' }
                                            ]
                                          },
                                          { 'name': '温州' },
                                          { 'name': '绍兴' }
                                        ]
                                      },
                                      { 'name': '绍兴' }
                                    ]
                                  },
                                  { 'name': '绍兴' }
                                ]
                              },
                              { 'name': '绍兴' }
                            ]
                          },
                          { 'name': '温州' },
                          { 'name': '绍兴' }
                        ]
                      },
                      { 'name': '温州' }
                    ]
                  },
                  { 'name': '宁波' },
                  { 'name': '温州' },
                  { 'name': '绍兴' }
                ]
            },
            {
              'name': '浙江',
              'children':
                [
                  { 'name': '杭州',
                    'children': [
                      { 'name': '宁波',
                        'children': [
                          { 'name': '宁波',
                            'children': [
                              { 'name': '温州',
                                'children': [
                                  { 'name': '温州',
                                    'children': [
                                      { 'name': '温州',
                                        'children': [
                                          { 'name': '宁波',
                                            'children': [
                                              { 'name': '温州',
                                                'children': [
                                                  { 'name': '温州',
                                                    'children': [
                                                      { 'name': '温州' },
                                                      { 'name': '绍兴' }
                                                    ] },
                                                  { 'name': '绍兴' }
                                                ] },
                                              { 'name': '绍兴' }
                                            ]
                                          },
                                          { 'name': '温州' },
                                          { 'name': '绍兴' }
                                        ]
                                      },
                                      { 'name': '绍兴' }
                                    ]
                                  },
                                  { 'name': '绍兴' }
                                ]
                              },
                              { 'name': '绍兴' }
                            ]
                          },
                          { 'name': '温州' },
                          { 'name': '绍兴' }
                        ]
                      },
                      { 'name': '温州' }
                    ]
                  },
                  { 'name': '宁波' },
                  { 'name': '温州' },
                  { 'name': '绍兴' }
                ]
            },
            {
              'name': '浙江',
              'children':
                [
                  { 'name': '杭州',
                    'children': [
                      { 'name': '宁波',
                        'children': [
                          { 'name': '宁波',
                            'children': [
                              { 'name': '温州',
                                'children': [
                                  { 'name': '温州',
                                    'children': [
                                      { 'name': '温州',
                                        'children': [
                                          { 'name': '宁波',
                                            'children': [
                                              { 'name': '温州',
                                                'children': [
                                                  { 'name': '温州',
                                                    'children': [
                                                      { 'name': '温州' },
                                                      { 'name': '绍兴' }
                                                    ] },
                                                  { 'name': '绍兴' }
                                                ] },
                                              { 'name': '绍兴' }
                                            ]
                                          },
                                          { 'name': '温州' },
                                          { 'name': '绍兴' }
                                        ]
                                      },
                                      { 'name': '绍兴' }
                                    ]
                                  },
                                  { 'name': '绍兴' }
                                ]
                              },
                              { 'name': '绍兴' }
                            ]
                          },
                          { 'name': '温州' },
                          { 'name': '绍兴' }
                        ]
                      },
                      { 'name': '温州' }
                    ]
                  },
                  { 'name': '宁波' },
                  { 'name': '温州' },
                  { 'name': '绍兴' }
                ]
            }
          ]
      },
      {
        'name': '浙江',
        'children':
          [
            { 'name': '杭州',
              'children': [
                { 'name': '宁波',
                  'children': [
                    { 'name': '宁波',
                      'children': [
                        { 'name': '温州',
                          'children': [
                            { 'name': '温州',
                              'children': [
                                { 'name': '温州',
                                  'children': [
                                    { 'name': '宁波',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ] },
                                            { 'name': '绍兴' }
                                          ] },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '温州' },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '绍兴' }
                          ]
                        },
                        { 'name': '绍兴' }
                      ]
                    },
                    { 'name': '温州' },
                    { 'name': '绍兴' }
                  ]
                },
                { 'name': '温州' }
              ]
            },
            { 'name': '宁波' },
            { 'name': '温州' },
            { 'name': '绍兴' }
          ]
      },
      {
        'name': '浙江',
        'children':
          [
            { 'name': '杭州',
              'children': [
                { 'name': '宁波',
                  'children': [
                    { 'name': '宁波',
                      'children': [
                        { 'name': '温州',
                          'children': [
                            { 'name': '温州',
                              'children': [
                                { 'name': '温州',
                                  'children': [
                                    { 'name': '宁波',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ] },
                                            { 'name': '绍兴' }
                                          ] },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '温州' },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '绍兴' }
                          ]
                        },
                        { 'name': '绍兴' }
                      ]
                    },
                    { 'name': '温州' },
                    { 'name': '绍兴' }
                  ]
                },
                { 'name': '温州' }
              ]
            },
            { 'name': '宁波' },
            { 'name': '温州' },
            { 'name': '绍兴' }
          ]
      },
      {
        'name': '浙江',
        'children':
          [
            { 'name': '杭州',
              'children': [
                { 'name': '宁波',
                  'children': [
                    { 'name': '宁波',
                      'children': [
                        { 'name': '温州',
                          'children': [
                            { 'name': '温州',
                              'children': [
                                { 'name': '温州',
                                  'children': [
                                    { 'name': '宁波',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ] },
                                            { 'name': '绍兴' }
                                          ] },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '温州' },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '绍兴' }
                          ]
                        },
                        { 'name': '绍兴' }
                      ]
                    },
                    { 'name': '温州' },
                    { 'name': '绍兴' }
                  ]
                },
                { 'name': '温州' }
              ]
            },
            { 'name': '宁波' },
            { 'name': '温州' },
            { 'name': '绍兴' }
          ]
      },
      {
        'name': '浙江',
        'children':
          [
            { 'name': '杭州',
              'children': [
                { 'name': '宁波',
                  'children': [
                    { 'name': '宁波',
                      'children': [
                        { 'name': '温州',
                          'children': [
                            { 'name': '温州',
                              'children': [
                                { 'name': '温州',
                                  'children': [
                                    { 'name': '宁波',
                                      'children': [
                                        { 'name': '温州',
                                          'children': [
                                            { 'name': '温州',
                                              'children': [
                                                { 'name': '温州' },
                                                { 'name': '绍兴' }
                                              ] },
                                            { 'name': '绍兴' }
                                          ] },
                                        { 'name': '绍兴' }
                                      ]
                                    },
                                    { 'name': '温州' },
                                    { 'name': '绍兴' }
                                  ]
                                },
                                { 'name': '绍兴' }
                              ]
                            },
                            { 'name': '绍兴' }
                          ]
                        },
                        { 'name': '绍兴' }
                      ]
                    },
                    { 'name': '温州' },
                    { 'name': '绍兴' }
                  ]
                },
                { 'name': '温州' }
              ]
            },
            { 'name': '宁波' },
            { 'name': '温州' },
            { 'name': '绍兴' }
          ]
      },

      {
        'name': '新疆',
        'children':
          [
            { 'name': '乌鲁木齐' },
            { 'name': '克拉玛依' },
            { 'name': '吐鲁番' },
            { 'name': '哈密' }
          ]
      }
    ]
}

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,让我来回答你关于 VueD3.js 结合实现树形图的问题。 首先,需要安装 D3.js 库和 Vue.js 库。可以通过 npm 命令进行安装,如下所示: ``` npm install d3 vue ``` 接下来,创建一个 Vue 组件,在其中引入 D3.js 库。在组件的 mounted 钩子函数中,可以使用 D3.js 创建树形图。 具体实现步骤如下: 1. 在 Vue 组件中引入 D3.js 库 ```javascript import * as d3 from 'd3'; ``` 2. 在 mounted 钩子函数中创建树形图 ```javascript mounted() { const data = { name: "root", children: [ { name: "child1", children: [ { name: "child1.1" }, { name: "child1.2" } ] }, { name: "child2", children: [ { name: "child2.1" }, { name: "child2.2" } ] } ] }; const margin = { top: 10, right: 120, bottom: 10, left: 40 }; const width = 960 - margin.width - margin.left; const height = 500 - margin.top - margin.bottom; const root = d3.hierarchy(data); root.dx = 10; root.dy = width / (root.height + 1); d3.tree().nodeSize([root.dx, root.dy])(root); const svg = d3.select("#tree") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const link = svg.selectAll(".link") .data(root.descendants().slice(1)) .enter().append("path") .attr("class", "link") .attr("d", d => { return "M" + d.y + "," + d.x + "C" + (d.y + d.parent.y) / 2 + "," + d.x + " " + (d.y + d.parent.y) / 2 + "," + d.parent.x + " " + d.parent.y + "," + d.parent.x; }); const node = svg.selectAll(".node") .data(root.descendants()) .enter().append("g") .attr("class", d => "node" + (d.children ? " node--internal" : " node--leaf")) .attr("transform", d => "translate(" + d.y + "," + d.x + ")"); node.append("circle") .attr("r", 2.5); node.append("text") .attr("dy", 3) .attr("x", d => d.children ? -6 : 6) .style("text-anchor", d => d.children ? "end" : "start") .text(d => d.data.name); } ``` 3. 在组件的模板中添加 SVG 元素 ```html <template> <svg id="tree"></svg> </template> ``` 这样就实现了一个简单的树形图。你可以根据自己的需求,对节点和链接进行样式等方面的修改。 希望这个例子能够对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值