/web-mindmap

用d3.js实现网页思维导图web mindmap

Primary LanguageJavaScript

网页思维导图（web mindmap）

目前在开发新项目——思维导图组件

更加成熟的项目：https://github.com/hellowuxin/mindmap

前言

初衷是想实现一个跟MindNode近似的网页思维导图web mindmap

本地运行

功能

  • 已实现：拖拽、编辑、删除、添加、缩放
  • 未实现：
    • 折叠
    • 编辑节点时，enter表示输入完成，不换行；option + enter换行
    • 通过鼠标操作添加节点
    • 一键找回根节点

开发手册

理清楚该网页的代码，方便后续开发。

部分功能的具体实现没有更新到开发手册，等功能下一次完善的时候再集中更新

简写变量

  • r - root
  • d - data
  • n - NodeList
  • del - delete
  • px/py - 相对初始位置的平移量
  • dx/dy - 相对父节点的坐标
  • x/y - 相对根节点的坐标
  • dura - duration
  • sele - select

DataJSON类

辅助函数

  • drawHotkey() -
  • seleOutNode(id) - 选中对应数据id的节点
  • seleMindNode(g, id) - 递归查找并选中对应数据id的节点
  • drawHiddenText(d) - 给数据d添加d.name在text中的宽度
  • traverse(d) -
  • checkEditFocus() - 当正在编辑的节点不再focus时，根据数据更新图
  • keyboardSvg(newJSON, sele) -

Outline绘制

  • drawOutline(data) - 根据数据data绘制outline
  • shapePath(d) - 连线生成器
  • clicked() - 点击事件
  • appendNode(enter) - 添加节点
  • updateNode(update) - 更新节点
  • appendPath(enter) - 添加连线
  • updatePath(update) - 更新连线
  • draw(r) - 处理数据r并分别绘制Node和Path

Mindnode绘制

  • drawMindnode(data) - 根据数据data绘制mindnode
  • draggedNodeRenew(draggedNode, targetX, targetY, dura) - 更新draggedNode的位置，dura设定了动画过渡的时间
  • draggedNodeChildrenRenew(d, px, py) - 更新数据d中的平移量px和py
  • dragback(subject, draggedNode) -
  • clicked() -
  • dragged() - 拖拽中：拖拽node
  • dragended() - 拖拽结束时：更新node
  • appendNode(enter) - 添加节点
  • updateNode(update) - 更新节点
  • tree(d) - 处理数据d，返回新数据
  • gNodeNest(d, gParent) - 嵌套绘制Node和Path
  • renewY(r, textWidth) - 根据textWidth更新数据y值
  • chart(d) - 处理数据d并开始绘制

仍待处理