SvgMind.js

使用 D3.js 制作关系图

use d3.js to create a diagram

使用(Usage)

	<head>
		<!-- 插件样式表 -->
		<link rel="stylesheet" href="contents/css/svgmind.css">
		...
	</head>
	
	<!-- 显示区域(display area) -->
	<section id="my-mind-box"></section>
	<!-- use d3.js -->
	<script src="contents/d3/d3.min.js"></script>
	<!-- use svgmind.js -->
	<script src="js/svgmind.js"></script>
	<script>
		var mymind = new SvgMind();
		
		mymind.ajax({
			url: 'contents/data/data1.json'
		}, (data) => {

			var option = {
				el: '#my-mind-box',
				data: data,
				perHeight: 100,
				perWidth: 200,
				circle: {
					r: 12
				},
				selectedMode: false,
				line: {
					refX: 20
				},
				text: {
					dy: '2.5em',
					dx: '0em'
				}
			}
			mymind.setOption(option);
		});
	</script>

API

option
- perHeight [number] 每个点之间 y 轴距离
- perWidth [number] 每个点之间 x 轴距离
- circle 圆的属性
  - r [number] 半径大小
- selectedMode [boolean] 是否支持选中, multiple 多选择; single 单选, false 不可以选择(默认)
- line 连线属性
  - refX [number] 箭头的x轴偏移
  - refY [number] 箭头的y轴偏移
  - smooth [boolean] 是否平滑连线 New
- text 文字属性
  - textAnchor [start | middle | end] 文字位置
  - dy [number] 文字的y轴偏移
  - dx [number] 文字的x轴偏移
  - length [number] 设置文字长度 false 为不限,取值为大于0
- events 事件
  - zoom [function] 缩放时的事件
  - zoomEnd [function] 缩放结束时事件
  - click [function] 点击事件

数据结构说明 (data Setting)

// 此数据来此 example 中的 人物关系图.html
{
    "data": {
    	// 节点关键字(node key)
        "Level_1_1": {
        	// node name
            "name": "Ektx",
            "level": 1,
            // node image
            "icon": "contents/img/kings.png",
            // set class
            "class": "your_class",
            // children
            "lineTo": {
                "Level_2_1": {
                	"type": "solid",
                	"text": "原籍"
                },
                "Level_2_2": {
                	"type": "solid",
                	"text": "工作"
                }
            }
        }, 
        // 节点关键字(node key)
        "Level_2_1": {
        	// node name
            "name": "安徽",
            "level": 2
        }
    }
}

ektx/SvgMind

SvgMind.js

使用(Usage)

API

数据结构说明 (data Setting)