项目中需要做个家谱图,网上查了好多资料没找到合适的,就自己写个简单的,方便以后查看,附上效果图
首先展示父亲、配偶、子女,三代人信息,然后选择其他人可以展开他的三代关系。如下图
下面是代码,这个关系图还只是个初稿,里有些逻辑不全,其中母亲这个通过父亲展开就不合适。以后有机会再完善吧。
height='250'
highlight-current-row
@current-change="handleCurrentChange"
:data='nodes'>
prop='id'
label='id'
width='50'>
prop='name'
label='姓名'>
height='250'
:data='links'>
prop='srcId'
label='源id'
width='50'>
prop='toId'
label='目标id'>
label='关系'>
{ { scope.row.type | toCn }}
import * as d3 from 'd3';
let width_ = 60;
export default {
data () {
return {
srcNode: null,
svg: null,
nodes: [
{id: '0', name: '张三'},
{id: '1', name: '张父'},
{id: '2', name: '张母'},
{id: '3', name: '张三妻'},
{id: '4', name: '张大'},
{id: '5', name: '张小'},
{id: '6', name: '张小妻'},
{id: '7', name: '张小小'},
{id: '8', name: '张三妻父'},
{id: '9', name: '张三妻母'},
{id: '10', name: '张三妻弟'}
],
links: [
{srcId: '0', toId: '1', type: 0}, // 0 父子
// {srcId: '0', toId: '2', type: 1}, // 1 母子
{srcId: '1', toId: '2', type: 2}, // 2 配偶
{srcId: '0', toId: '3', type: 2}, // 2 配偶
{srcId: '0', toId: '4', type: 3}, // 子女
{srcId: '0', toId: '5', type: 3}, // 子女
{