vue.js中使用d3.js画家谱关系图

<template lang='html'>
<div class='demo'>
<div class='left'>
<div class='left-top'>
<el-table
height='250'
highlight-current-row
@current-change="handleCurrentChange"
:data='nodes'>
<el-table-column
prop='id'
label='id'
width='50'>
</el-table-column>
<el-table-column
prop='name'
label='姓名'>
</el-table-column>
</el-table>
</div>
<div class='left-bottom'>
<el-table
height='250'
:data='links'>
<el-table-column
prop='srcId'
label='源id'
width='50'>
</el-table-column>
<el-table-column
prop='toId'
label='目标id'>
</el-table-column>
<el-table-column
label='关系'>
<template slot-scope='scope'>{{ scope.row.type | toCn }} </template>
</el-table-column>
</el-table>
</div>
</div>
<div class='testd3' ref="testd3">
</div>
</div>
</template>

<script>
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);
// 计算节点坐标

3ff0
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() {
}
};
</script>

<style lang='css'>
[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%;
}
</style>