vue横向树结构svg

要实现横向树结构的SVG，可以使用d3.js这个强大的JavaScript库。具体步骤如下：

1. 安装d3.js。可以通过npm安装，也可以通过CDN引入。

2. 准备数据。横向树结构的数据应该是一个树形结构，每个节点包含自身的id、名称、父节点id，以及子节点数组。

3. 创建SVG元素。使用d3.js的select和append方法创建SVG元素，并设置宽高。

4. 创建布局。使用d3.js的tree布局，设置方向为从左到右。

5. 绑定数据。使用d3.js的datum和data方法，将数据绑定到SVG元素上。

6. 绘制节点和连线。使用d3.js的append、attr、enter和exit等方法，绘制节点和连线。

7. 设置样式。使用CSS设置节点和连线的样式。

8. 完成。现在你已经成功地绘制出了横向树结构的SVG图形。

下面是一个简单的示例代码：

//准备数据
const data = {
  id: 1,
  name: 'root',
  parentId: null,
  children: [
    {
      id: 2,
      name: 'child 1',
      parentId: 1,
      children: []
    },
    {
      id: 3,
      name: 'child 2',
      parentId: 1,
      children: [
        {
          id: 4,
          name: 'grandchild 1',
          parentId: 3,
          children: []
        }
      ]
    }
  ]
};

//创建SVG元素
const svg = d3.select('#chart')
  .append('svg')
  .attr('width', 800)
  .attr('height', 400);

//创建布局
const treeLayout = d3.tree().size([300, 500]).separation((a, b) => (a.parent == b.parent ? 1 : 2) / a.depth);

//绑定数据
const root = d3.hierarchy(data);
const treeData = treeLayout(root);

//绘制节点
const nodes = svg.selectAll('.node')
  .data(treeData.descendants())
  .enter()
  .append('g')
  .attr('class', 'node')
  .attr('transform', (d) => `translate(${d.y}, ${d.x})`);

nodes.append('circle')
  .attr('r', 10);

nodes.append('text')
  .text((d) => d.data.name)
  .attr('x', 20);

//绘制连线
const links = svg.selectAll('.link')
  .data(treeData.links())
  .enter()
  .append('path')
  .attr('class', 'link')
  .attr('d', d3.linkHorizontal()
    .x((d) => d.y)
    .y((d) => d.x));

//设置样式
svg.selectAll('circle')
  .style('fill', '#fff')
  .style('stroke', '#333')
  .style('stroke-width', '2px');

svg.selectAll('.link')
  .style('fill', 'none')
  .style('stroke', '#333')
  .style('stroke-width', '2px');

需要注意的是，上述代码只是一个示例，实际应用中需要根据具体情况进行调整和优化。