vue族谱架构_vue.js中使用d3.js画家谱关系图

项目中需要做个家谱图，网上查了好多资料没找到合适的，就自己写个简单的，方便以后查看，附上效果图

首先展示父亲、配偶、子女，三代人信息，然后选择其他人可以展开他的三代关系。如下图

下面是代码，这个关系图还只是个初稿，里有些逻辑不全，其中母亲这个通过父亲展开就不合适。以后有机会再完善吧。

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}, // 子女

{