svg-mind-js
将对象转为 SVG 脑图
使用
import
yarn add svg-mind-js
//or
npm install svg-mind-js
项目中引入使用
import mindMap from 'svg-mind-js'
mindMap(data, options)
script 标签引入
下载 svg-mind-js
并放到项目中
<script src="svg-mind-js.js"></script>
<script>
mindMap(data, options)
</script>
参数说明
-
{Object|Array[Object]} data
: 数据源,可以是对象或对象数组,每一个对象应包含的key
为:-
{String} label
: 名称,如果没有label
属性,可使用options.name
指定一个key
作为label
使用 -
{Array[Object]} children
: 子节点
-
-
{Object} options
(可选): 绘制配置(以下配置都是可选的)-
{String||null} direction
: 绘制模式,可选值为right
,指定right
时表示所有的元素将绘制在中心点的右侧,默认绘制在中心点两侧 -
{String} name
: 如果没有label
字段,可用name
批定哪个key
作为label
使用 -
{Function} callback
: 点击每一项子元素时触发的回调函数,参数将返回当前对象信息 -
{String} className
: 给 svg 赋加的类名 -
{Object} rectStyle
: 绘制{svg}rect
的样式配置(包含children
属性对象都用rect
绘制)// 粟子: { 'font-size': '16px', // 文字大小 'border-radius': '5', // 圆角大小 color: '#fff', // 文字颜色 fill: '#a3c6c0', // 背景颜色 padding: '2 10', // 文字与边框的间距,同 CSS padding,支持格式 `padding: x` 和 `padding: x x`, 不支持 `padding: x x x x` }
-
textStyle
: 绘制{svg}text
的样式配置(不包含children
属性对象都用text
绘制)// 粟子: { 'font-size': '16px', // 文字大小 color: '#fff', // 文字颜色 }
-
lineStyle
: 绘制{svg}line
连接线的样式配置// 粟子: { width: 1, // 线条宽度 color: '#fff', // 文字颜色 默认值为 textStyle.color }
-
rootStyle
: 绘制{svg}rect
中心点的样式配置
// 粟子: { 'font-size': '18px', // 文字大小 'border-radius': '5', // 圆角大小 color: '#fff', // 文字颜色 fill: 'transparent', // 背景颜色 padding: 0, // 文字与边框的间距,同 CSS padding,支持格式 `padding: x` 和 `padding: x x`, 不支持 `padding: x x x x` }
-
globalStyle
: 绘制元素布局相关的样式配置// 粟子: { verticalMargin: 20, // 元素上下间距 rowMargin: 40, // 元素左右间距 }
-