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>

组件参数

属性

属性	类型	默认值	说明
data	Object		数据
direction	String	vertical	布局方向 vertical:竖向排列；horizontal：横向排列
childrenKey	String 或 Function	"children"	字节的属性值
defaultNodeKey	String 或 Function		默认节点显示的数据的属性值
defaultNodeStyle	String 或 Function		默认节点样式
defaultNodeCollapsedStyle	String 或 Function		默认节点收起的样式
showKnot	Boolean	false	是否显示连接节点
wheelZoom	Boolean	true	是否鼠标滚动缩放
lineType	String	polyline	连接线类型 polyline：折线；curve：曲线
lineStyle	Object		连接线样式
collapsedWay	String		节点收起、展开方式 clickTreeNode: 点击树节点；clickKnotNode：点击连接节点
top	String 或 Number	20	距顶部之间的距离
left	String 或 Number	'center'	距左侧之间的距离
hierarchyMargin	Number	60	树层级之间的间距
neighborMargin	Number	20	树节点之间的间距
stretchLength	Number	10	树节点连接线延长的长度
knotStretchLength	Number	5	连接节点连接线延长的长度

方法

方法名	参数	说明
zoom	radio	缩放
reSize		自定义节点尺寸发生变化后，调用该方法重新适配节点大小
collapseNode	node	收起、展开节点