vue组件横向树实现代码

实现一个 vue 组件横向树需要以下步骤：

第一步：安装依赖

横向树的实现需要使用到 d3 (Data-Driven Documents) 库，而在 Vue 中使用 d3 需要先安装依赖。可以通过 npm 来安装：

npm install d3@5.15.0

对于 Vue 项目，可以在 main.js 中引入 d3 库，以便在整个项目中使用：

import * as d3 from "d3";
Vue.prototype.$d3 = d3;

第二步：实现组件

实现横向树的核心代码是在组件中编写的。下面是一个示例：

<template>
  <div class="tree-diagram">
    <svg :width="width" :height="height">
      <g :transform="'translate(' + margin.left + ',' + margin.top + ')'">
        <template v-if="data">
          <rect class="background" :width="treeWidth" :height="treeHeight" @click.stop=""></rect>
          <g :transform="'translate(' + paddingLeft + ',' + paddingTop + ')'">
            <TreeNode
              :node="data"
              :level="1"
              :height="height"
              :width="width"
              :nodeWidth="nodeWidth"
              :nodeHeight="nodeHeight"
              :linkStrokeWidth="linkStrokeWidth"
              :linkStrokeColor="linkStrokeColor"
              :nodeFillColor="nodeFillColor"
              :nodeTextColor="nodeTextColor"
              @node-clicked="onNodeClicked"
            ></TreeNode>
          </g>
        </template>
        <template v-else>
          <text>No Data</text>
        </template>
      </g>
    </svg>
  </div>
</template>
<script>
import TreeNode from "./TreeNode.vue";

export default {
  name: "TreeDiagram",
  components: {
    TreeNode,
  },
  props: {
    data: {
      type: Object,
      default: null,
    },
    width: {
      type: Number,
      default: 800,
    },
    height: {
      type: Number,
      default: 600,
    },
    nodeWidth: {
      type: Number,
      default: 200,
    },
    nodeHeight: {
      type: Number,
      default: 80,
    },
    linkStrokeWidth: {
      type: Number,
      default: 4,
    },
    linkStrokeColor: {
      type: String,
      default: "#666",
    },
    nodeFillColor: {
      type: String,
      default: "#fff",
    },
    nodeTextColor: {
      type: String,
      default: "#000",
    },
  },
  data() {
    return {
      margin: {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20,
      },
    };
  },
  computed: {
    treeWidth() {
      return this.nodeWidth * 2 + this.paddingLeft * 2;
    },
    treeHeight() {
      return this.nodeHeight * 2 + this.paddingTop * 2;
    },
    paddingLeft() {
      return this.nodeWidth * 0.5;
    },
    paddingTop() {
      return this.nodeHeight * 0.5;
    },
  },
  methods: {
    onNodeClicked(node) {
      this.$emit("node-clicked", node);
    },
  },
};
</script>
<style scoped>
.background {
  fill: none;
}

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

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

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}
</style>

上面的代码中使用到了 TreeNode 组件，可以通过下面的代码来实现：

<template>
  <g :transform="'translate(' + (node.x - nodeWidth / 2) + ',' + (node.y - nodeHeight / 2) + ')'">
    <rect :width="nodeWidth" :height="nodeHeight" :fill="nodeFillColor"></rect>
    <text :x="nodeWidth / 2" :y="nodeHeight / 2" :dy="nodeHeight * 0.35" :text-anchor="'middle'" :fill="nodeTextColor">
      {{ node.name }}
    </text>
    <template v-if="node.children">
      <g class="children">
        <template v-for="(child, index) in node.children" :key="index">
          <TreeNode
            :node="child"
            :level="(level || 0) + 1"
            :height="height"
            :width="width"
            :nodeWidth="nodeWidth"
            :nodeHeight="nodeHeight"
            :linkStrokeWidth="linkStrokeWidth"
            :linkStrokeColor="linkStrokeColor"
            :nodeFillColor="nodeFillColor"
            :nodeTextColor="nodeTextColor"
            @node-clicked="onNodeClicked"
          ></TreeNode>
        </template>
      </g>
    </template>
  </g>
</template>
<script>
export default {
  name: "TreeNode",
  props: {
    node: {
      type: Object,
      default: null,
      required: true,
    },
    level: {
      type: Number,
      default: null,
    },
    height: {
      type: Number,
      default: 600,
    },
    width: {
      type: Number,
      default: 800,
    },
    nodeWidth: {
      type: Number,
      default: 200,
    },
    nodeHeight: {
      type: Number,
      default: 80,
    },
    linkStrokeWidth: {
      type: Number,
      default: 4,
    },
    linkStrokeColor: {
      type: String,
      default: "#666",
    },
    nodeFillColor: {
      type: String,
      default: "#fff",
    },
    nodeTextColor: {
      type: String,
      default: "#000",
    },
  },
  computed: {
    isRoot() {
      return this.level === 1;
    },
  },
  methods: {
    onNodeClicked() {
      this.$emit("node-clicked", this.node);
    },
  },
};
</script>
<style scoped>
</style>

示例说明

下面是两个示例：

1. 显示简单数据结构的横向树

<template>
  <TreeDiagram :data="treeData" @node-clicked="onNodeClicked" />
</template>
<script>
import TreeDiagram from "./TreeDiagram.vue";

export default {
  name: "App",
  components: {
    TreeDiagram,
  },
  data() {
    const treeData = {
      name: "rootNode",
      children: [
        {
          name: "childNode1",
        },
        {
          name: "childNode2",
        },
      ],
    };

    return {
      treeData,
    };
  },
  methods: {
    onNodeClicked(node) {
      console.log("Node Clicked: ", node);
    },
  },
};
</script>

1. 显示复杂数据结构的横向树

<template>
  <TreeDiagram :data="treeData" />
</template>
<script>
import TreeDiagram from "./TreeDiagram.vue";

const data = {
  name: "flare",
  children: [
    {
      name: "data",
      children: [
        {
          name: "converters",
          children: [
            { name: "Converters", value: 721 },
            { name: "DelimitedTextConverter", value: 4294 },
          ],
        },
      ],
    },
    {
      name: "display",
      children: [
        { name: "DirtySprite", value: 8833 },
        {
          name: "LineSprite",
          children: [
            { name: "Arrows", value: 841 },
            { name: "LineSprite", value: 1769 },
          ],
        },
      ],
    },
  ],
};

export default {
  name: "App",
  components: {
    TreeDiagram,
  },
  data() {
    return {
      treeData: data,
    };
  },
};
</script>

参考文献：

1. vue 组件横向树实现 https://www.jianshu.com/p/694a99d50de3
2. D3.js https://d3js.org/