# dz-mind-map

> Mindmap Vue Component

Latest version **1.0.3** (published 2020-12-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install dz-mind-map
pnpm add dz-mind-map
yarn add dz-mind-map
bun add dz-mind-map
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-12-12 |
| First published | 2020-09-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 298.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 463 |
| Author | CSDN 帝尊菜鸟 |
| Maintainers | a781278657 |
| Keywords | mindmap, vue, d3 |

## Links

- npm: https://www.npmjs.com/package/dz-mind-map
- Repository: https://github.com/hellowuxin/mindmap
- Homepage: https://github.com/hellowuxin/mindmap#readme
- Issues: https://github.com/hellowuxin/mindmap/issues
- npm.io page: https://npm.io/package/dz-mind-map

## Dependencies (9)

- [d3-drag](https://npm.io/package/d3-drag.md) ^1.2.5
- [d3-ease](https://npm.io/package/d3-ease.md) ^1.0.6
- [d3-zoom](https://npm.io/package/d3-zoom.md) ^1.8.3
- [d3-scale](https://npm.io/package/d3-scale.md) ^3.2.1
- [d3-shape](https://npm.io/package/d3-shape.md) ^1.3.7
- [d3-flextree](https://npm.io/package/d3-flextree.md) ^2.1.1
- [d3-selection](https://npm.io/package/d3-selection.md) ^1.4.2
- [d3-transition](https://npm.io/package/d3-transition.md) ^1.3.2
- [d3-scale-chromatic](https://npm.io/package/d3-scale-chromatic.md) ^1.5.0

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2020-12-12
- 1.0.2 — 2020-09-25
- 1.0.1 — 2020-09-24
- 1.0.0 — 2020-09-24

## README

![](https://img-blog.csdnimg.cn/20201212174207553.gif#pic_center)

### 前言
站在 [@hellowuxin/mindmap](https://www.npmjs.com/package/@hellowuxin/mindmap) 肩膀上增加了一些小功能，如上图（如果图片能够正常显示的话）：

- 修改放大缩小倍数，原来的 [0.1 - 8] 到 [0.6, 1.4]

- 增加 `needEdit` props，控制是否可编辑节点（防止与 `click` 事件冲突）

- `click` 事件暴露更多数据，比如我这里需要点击节点跳转到新的网页。
- `v-model` 提取初始绑定的数据并一并暴露出来
- 增加节点定制背景色功能

### 再次补充一下

该插件只是本人为了完成项目（狠急的项目！！！）中的功能，基于 `@hellowuxin/mindmap` 做出的极极极为简单的调整，并为了方便维护才发布到 **NPM** 的，仅限用于学习交流或在demo中使用。如有以上功能需求的，我建议直接向原作者提交 issue。

### ISC许可

- ISC许可证是一种开放源代码许可证，在功能上与两句版的BSD许可证相同。

### BSD许可

- BSD开源协议（original BSD license、FreeBSD license、Original BSD license）是一个给于使用者很大自由的协议，BSD 代码鼓励代码共享，但需要尊重代码作者的著作权。
- BSD由于允许使用者修改和重新发布代码，也允许使用或在BSD代码上开发商业软件发布和销售，因此是对商业集成很友好的协议。

### 联系我

[帝尊菜鸟](https://blog.csdn.net/dizuncainiao)

### 源码

[https://gitee.com/dizuncainiao/dz-mind-map](https://gitee.com/dizuncainiao/dz-mind-map)

# 思维导图VUE组件

![npm](https://img.shields.io/npm/v/@hellowuxin/mindmap)
![npm](https://img.shields.io/npm/dm/@hellowuxin/mindmap)

> 一个由[MindNode](https://mindnode.com)启发的思维导图Vue组件，基于d3.js实现  
> 目前实现的功能有基本的编辑、拖移、缩放、撤销、上下文菜单、折叠...

在线演示：<https://mindnode.5xin.xyz/>

## 近期更新

- 左键多选

## 安装

```sh
npm install @hellowuxin/mindmap
```

## PROPS

| Name        | Type   | Default   | Description          |
| ---         | ---    | ---       | ---                  |
| v-model     | Array  | undefined | 设置思维导图数据        |
| width       | Number | 100%      | 设置组件宽度           |
| height      | Number | undefined | 设置组件高度           |
| xSpacing    | Number | 80        | 设置节点横向间隔        |
| ySpacing    | Number | 20        | 设置节点纵向间隔        |
| strokeWidth | Number | 4         | 设置连线的宽度          |
| draggable   | Boolean| true      | 设置节点是否可拖拽      |
| gps         | Boolean| true      | 是否显示居中按钮        |
| fitView     | Boolean| true      | 是否显示缩放按钮        |
| showNodeAdd | Boolean| true      | 是否显示添加节点按钮     |
| keyboard    | Boolean| true      | 是否响应键盘事件        |
| contextMenu | Boolean| true      | 是否响应右键菜单        |
| zoomable    | Boolean| true      | 是否可缩放、拖移        |
| showUndo    | Boolean| true      | 是否显示撤销重做按钮     |
| download    | Boolean| true      | 是否显示下载按钮        |

## EVENTS

| Name           | arguments | Description                    |
| ---            | ---       | ---                            |
| updateNodeName | data, id  | 更新节点名称时，传入节点数据和节点id |
| click          | data, id  | 点击节点时，传入节点数据和节点id    |

## 样例

```html
<template>
  <mindmap v-model="data"></mindmap>
</template>

<script>
import mindmap from '@hellowuxin/mindmap'

export default {
  components: { mindmap },
  data: () => ({
    data: [{
      "name":"如何学习D3",
      "children": [
        {
          "name":"预备知识",
          "children": [
            { "name":"HTML & CSS" },
            { "name":"JavaScript" },
            ...
          ]
        },
        {
          "name":"安装",
          "_children": [
            { "name": "折叠节点" }
          ]
        },
        {
          "name":"进阶",
          "left": true
        },
        ...
      ]
    }]
  })
}
</script>
```

## 键盘事件

<kbd>⇥ tab</kbd>、<kbd>⏎ enter</kbd>、<kbd>⌫ backspace</kbd>、<kbd>⌘ cmd</kbd>+<kbd>z</kbd>、<kbd>⌘ cmd</kbd>+<kbd>y</kbd>

## 交互逻辑

**鼠标**：space+左键移动、右键菜单、ctrl+滚轮缩放、左键选中

**触控板**：双指滚动移动、双指菜单、双指捏合缩放、单指选中

## 待解决

- [ ] 导出多种格式
- [ ] 设置节点的宽高
- [ ] 多个根节点
- [ ] ...

---
_Source: https://npm.io/package/dz-mind-map · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._