vue3-d3-tree v1.0.2

Vue3 D3 Tree

使用 D3 实现的 Vue3 树状图

特性

• 内置默认节点
• 支持自定义节点
• 支持横向、竖向排列方式
• 支持缩放、拖拽
• 支持节点收起、展开
• 支持修改连线样式

用法

Demo

npm i vue3-d3-tree

<script setup>
import { ref } from "vue";
import VueTree from "vue3-d3-tree";

const treeData = ref({
  name: "食物",
  children: [{ name: "水果" }, { name: "蔬菜" }],
});
</script>

<template>
  <div class="canvas-container">
    <VueTree :data="treeData">
      <!-- 使用插槽自定义树节点 -->
      <template #node="{ data, index }">
        <div class="custom-node">
          {{ data.name }}
        </div>
      </template>
      <!-- 使用插槽自定义树节点 end -->
    </VueTree>
  </div>
</template>

组件参数

属性

方法