vue+D3实现组织架构横向树状图，其中点的样式可以标签自定义

你可以使用Vue.js和D3.js来实现组织架构横向树状图，并且可以自定义节点的样式。

首先，你需要安装Vue.js和D3.js。可以使用npm或yarn来安装它们：

npm install vue d3

或者

yarn add vue d3

接下来，在你的Vue组件中，可以使用D3.js来绘制横向树状图。以下是一个简单的示例：

<template>
  <div id="chart"></div>
</template>

<script>
import * as d3 from 'd3';

export default {
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      // 获取SVG容器
      const svg = d3.select('#chart')
        .append('svg')
        .attr('width', 600)
        .attr('height', 400);

      // 构造树状图数据
      const data = {
        name: 'CEO',
        children: [
          { name: 'Manager' },
          { name: 'Manager' },
          { name: 'Manager' }
        ]
      };

      // 创建树状图布局
      const layout = d3.tree().size([400, 400]);

      // 转换数据为层次结构
      const root = d3.hierarchy(data);
      const treeData = layout(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)
        .style('fill', 'steelblue')
        // 在这里可以自定义节点的样式

      nodes.append('text')
        .attr('dy', 4)
        .attr('x', d => d.children ? -8 : 8)
        .style('text-anchor', d => d.children ? 'end' : 'start')
        .text(d => d.data.name);
    }
  }
};
</script>

<style>
.node circle {
  fill: steelblue;
}
</style>

上述代码中，使用D3.js创建了一个SVG容器，并在其中绘制了树状图。你可以通过自定义节点的样式，例如修改圆的颜色、大小等来实现标签的自定义。

这只是一个简单的示例，你可以根据你的需求进一步自定义和扩展。希望对你有帮助！