vue-knowledge-mindmap

基于 D3.js 和 Vue 3 的知识树思维导图组件库，支持自定义数据和颜色配置。

安装

npm install vue-knowledge-mindmap

效果示例如

电脑端

移动端

## 快速上手

```vue
<template>
  <div class="mindmap-wrapper">
    <MindMapTree
      :data="treeData"
      :config="config"
      :show-legend="true"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 引入组件
import { MindMapTree } from 'vue-knowledge-mindmap'
// 引入类型定义
import type { KnowledgeTreeNode, MindMapConfig } from 'vue-knowledge-mindmap'

// 引入样式
import 'vue-knowledge-mindmap/dist/style.css'

// 示例数据
const treeData = ref<KnowledgeTreeNode[]>([
  {
    knowledge_id: 1,
    knowledge: '根节点',
    total_no: 0,
    pid: 0,
    ptid: 0,
    type: 1,
    must_question_no: 0,
    level: 1,
    knowledge_no: 1,
    mastery_level: 2,
    weight: 1,
    mastery_rate: 0,
    question_num: 0,
    children: []
  }
])
// 主要配置项
const config: Partial<MindMapConfig> = {
  // 节点颜色配置
  colors: {
    none: '#d9d9d9',
    weak: '#ffd8b0',
    basic: '#ffb06a',
    expert: '#ff8a3c'
  },
  // 节点高度
  nodeHeight: 28,
  // 字体大小
  fontSize: 12,
  // 是否显示节点元数据（如掌握等级、问题数等）
  showMeta: true,
  // 是否显示节点徽章（如掌握等级图标）
  showBadge: true,
  // 折叠配置
  collapse: { enabled: true, defaultDepth: 1 },
  // 布局配置
  layout: {
    // 是否使用高级布局算法
    useAdvancedLayout: true,
    // 水平间距
    hspace: 30,
    // 垂直间距
    vspace: 20,
    // 父节点与子节点间距
    pspace: 13,
    // 堂兄弟节点间距
    cousinSpace: 0,
    // 布局模式（'full' 或 'compact'）
    mode: 'full'
  }
}
// 节点点击事件处理函数
const handleNodeClick = (node: KnowledgeTreeNode, event: MouseEvent) => {
  console.log('节点点击:', node)
}
</script>

<style scoped>
.mindmap-wrapper { width: 100vw; height: 100vh; }
</style>

配置与事件

• data: KnowledgeTreeNode | KnowledgeTreeNode[]
• config: Partial<MindMapConfig>
• show-legend: boolean（默认 true）
• 事件：@node-click="(node, event) => {}"

常用配置：

interface MindMapConfig {
  nodeHeight?: number
  fontSize?: number
  colors?: { none?: string; weak?: string; basic?: string; expert?: string }
  collapse?: { enabled?: boolean; defaultDepth?: number }
  layout?: {
    useAdvancedLayout?: boolean
    hspace?: number
    vspace?: number
    pspace?: number
    cousinSpace?: number
    mode?: 'full'
  }
  showMeta?: boolean
  showBadge?: boolean
}

掌握等级颜色

• 1 或未设置：colors.none
• 2：colors.weak
• 3：colors.basic
• 4：colors.expert

开发

npm install
npm run dev
npm run type-check
npm run build