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

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

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

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

{srcId: '5', toId: '6', type: 2}, // 配偶

{srcId: '5', toId: '7', type: 3}, // 子女

{srcId: '3', toId: '8', type: 0}, // 父

{srcId: '8', toId: '9', type: 2}, // 配偶

{srcId: '8', toId: '10', type: 3} // 子女

],

drag: false

};

},

filters: {

toCn (src) {

let res = ['父子', '母子', '配偶', '子女'];

return res[src];

}

},

methods: {

handleCurrentChange (row) {

this.srcNode = row;

// 查找中心点连线关系 srcId = 0

let srcId = row.id;

let srcNode = this.nodes.filter(n => n.id === srcId)[0];

// 获取与此节点关系点

let links = this.links.filter(l => l.srcId === srcId);

let otherlinks = this.links.filter(l => l.toId === srcId).map(l => {

let link = {};

if (l.type === 3) { // 子女 -> 父子

link.type = 0;

} else if (l.type === 0) { // 父女 -> 子女

link.type = 3;

} else {

link.type = l.type;

}

link.srcId = l.toId;

link.toId = l.srcId;

return link;

});

links.push(...otherlinks);

// 计算节点坐标

let nodes_ = this.convert(srcNode, links);

let that = this;

// 设置画布

let width = 1000;

let height = 720;

// console.log(d3.select('.testd3')[0].innerHTML);

d3.select('.testd3').selectAll('*').remove();

// 画中心点

let svg = d3.select('.testd3').append('svg')

.attr('width', width)

.attr('height', height)

.append('g')

.attr('transform', 'translate(40,0)');

var drag = d3.behavior.drag()

.on('drag', function(d) {

d3.select(this)

.attr('transform', 'translate(' + (d3.event.x - 30) + ',' + (d3.event.y - 30) + ')')

.append('rect')

.attr('x', d.x = d3.event.x - 30)

.attr('y', d.y = d3.event.y - 30);

// 线条

svg.selectAll(`.link-${d.id}`).attr('d', function(dd) {

return that.getPath(d, dd);

});

});

that.drag = drag;

// 画线

this.drawLinks(svg, links);

// 画点

console.log('nodes_', nodes_);

this.drawNodes(svg, nodes_);

},

// 转换

convert (srcNode, links) {

let nodes = [];

let map = new Map();

// 子女个数

let childsize = links.filter(l => l.type === 3).length;

// 子女开始位置

let start = -(childsize - 1) * width_;

if (srcNode.x === undefined) { // 默认坐标

srcNode.x = 150;

srcNode.y = 150;

}

map.set(srcNode.id, srcNode);

let {x, y} = srcNode;

links.forEach(l => {

if (l.type === 0) { // 父子

map.set(l.toId, {x: x, y: y - width_ * 2, type: l.type});

}

if (l.type === 1) { // 母子

map.set(l.toId, {x: x + width_ * 2, y: y - width_ * 2, type: l.type});

}

if (l.type === 2) { // 配偶

map.set(l.toId, {x: x + width_ * 2, y: y, type: l.type});

}

if (l.type === 3) { // 子女

map.set(l.toId, {x: x + start, y: y + width_ * 2, type: l.type});

start = start + width_ * 2;

}

});

this.nodes.forEach(n => {

let m = map.get(n.id);

if (m) {

n['x'] = n.x || m.x;

n['y'] = n.y || m.y;

n['type'] = m.type;

nodes.push(n);

}

});

return nodes;

},

getPath (move, stas) {

// 获取对方坐标

let srcId = stas.srcId;

let flag = false;

if (move.id === stas.srcId) {

srcId = stas.toId;

flag = true;

}

let path;

// 源

let {x, y} = this.nodes.filter(n => n.id === srcId)[0];

if (stas.type === 0) { // 父子

if (flag) {

path = `M${x + width_ / 2} ${y}

L${x + width_ / 2} ${y + width_ * 1.5}

L${move.x + width_ / 2} ${move.y - width_ / 2}

L${move.x + width_ / 2} ${move.y}`;

} else {

path = `M${x + width_ / 2} ${y}

L${x + width_ / 2} ${y - width_ / 2}

L${move.x + width_ / 2} ${move.y + width_ * 1.5}

L${move.x + width_ / 2} ${move.y}`;

}

}

if (stas.type === 2 || stas.type === 1) { // 配偶

let w_ = move.x > x ? width_ : -width_;

let padding = move.x > x ? -width_ / 2 : width_ * 1.5;

if (flag) {

path = `M${x + width_ / 2 + w_ / 2} ${y + width_ / 2}

L${move.x + padding} ${y + width_ / 2}

L${move.x + width_ / 2 - w_ / 2} ${move.y + width_ / 2}`;

} else {

path = `M${x + width_ / 2 + w_ / 2} ${y + width_ / 2}

L${move.x + padding} ${y + width_ / 2}

L${move.x + width_ / 2} ${move.y + width_ / 2}`;

}

}

if (stas.type === 3) { // 子女

if (flag) {

path = `M${x + width_ / 2} ${y + width_}

L${x + width_ / 2} ${y - width_ / 2}

L${move.x + width_ / 2} ${move.y + width_ * 1.5}

L${move.x + width_ / 2} ${move.y + width_}`;

} else {

path = `M${x + width_ / 2} ${y + width_}

L${x + width_ / 2} ${y + width_ * 1.5}

L${move.x + width_ / 2} ${move.y - width_ / 2}

L${move.x + width_ / 2} ${move.y + width_}`;

}

}

return path;

},

drawNode (svg, node) {

let node_ = svg.selectAll(`.node-${node.id}`)

.data([node])

.enter()

.append('g')

.attr('class', `node-${node.id}`)

.attr('transform', function(d) {

return 'translate(' + (d.x) + ',' + (d.y) + ')';

})

.on('dblclick', (d) => {

let links = this.links.filter(l => l.srcId === d.id);

if (links.length === 0) {

this.$message('没有关联数据');

return;

}

let nodes2 = this.convert(d, links);

this.drawLinks(svg, links);

this.drawNodes(svg, nodes2);

})

.on('mouseover', function(d) {

d3.select(this).select('rect')

.attr('stroke', '#FFCC33')

.attr('stroke-width', 3); // 设置边框

})

.on('mouseout', function(d) {

d3.select(this).select('rect')

.attr('stroke-width', 0); // 取消边框

})

.call(this.drag);

node_.append('rect')

.attr('width', 60)

.attr('height', 60)

.attr('x', 0)

.attr('y', 0)

.attr('style', (d) => {

return (d.type === 1 || d.type === 2) ? 'fill:#FFAD5B;' : 'fill:#35AD5B;';

});

node_.append('text')

.attr('dx', function(d) {

return 30;

})

.attr('dy', 30)

.style('text-anchor', function(d) {

return 'middle';

})

.style('fill', '#fff')

.text(function(d) {

return d.name;

});

},

drawNodes (svg, nodes) {

nodes.forEach(n => {

this.drawNode(svg, n);

});

},

// 添加链接

drawLinks (svg, linksData) {

let that = this;

linksData.forEach(l => {

let classFlag = l.srcId > l.toId ? `${l.srcId}-${l.toId}` : `${l.toId}-${l.srcId}`;

svg.selectAll(`.link-${classFlag}`)

.data([l])

.enter()

.append('path')

.attr('class', d => {

return `link-${d.srcId} link-${d.toId} link-${classFlag}`;

})

.attr('d', function(d) {

let node = that.nodes.filter(n => n.id === d.toId)[0];

return that.getPath(node, d);

})

.attr('style', function() {

return 'stroke:#F7881F';

});

});

}

},

mounted() {

}

};

[class^=link] {

fill: none;

stroke: #ccc;

stroke-width: 1.5px;

}

.demo {

width: 100%;

height: 100%;

}

.left {

float: left;

width: 30%;

}

.testd3 {

float: left;

width: 70%;

}