<template>
<div class="force" ref="force"></div>
</template>
<script>
let svg = null;
let force = null;
let links = null;
let nodes = null;
let texts = null;
let linePath = d3.svg.line();
export default {
name: "force",
data() {
return {
nodesData: [],
linksData: []
}
},
mounted() {
this.$nextTick(() => {
this.renderForce();
})
},
computed: {
width() {
return this.$refs.force.getBoundingClientRect().width;
},
height() {
return this.$refs.force.getBoundingClientRect().height;
}
},
methods: {
renderForce() {
this.initSvg();
this.links();
this.nodes();
this.texts();
this.initForce();
force.start();
this.refreshForce();
},
/**
* 初始化svg
*/
initSvg() {
// 创建svg
svg = d3.select('.force')
.append('svg')
.attr('width', this.width)
.attr('height', this.height)
// 在svg上添加放缩行为
.call(d3.behavior.zoom()
.on('zoom', this.zoomed)) // 监听放缩中
.append('g')
.attr('id', 'forceWrapper');
},
/**
* 初始化力导向图
*/
initForce() {
force = d3.layout.force()
.nodes(this.nodesData) // 设定或获取力导向图的节点数组
.links(this.linksData) // 设置或获取力导向如布局的连线数组
.size([this.width, this.height]) // 设定或获取力导向图的作用范围
.linkDistance(200) // 设置连线的距离
.charge(-400)// 设置节点的电荷数
.on('tick', this.tick); // 动画的计算进入下一步
},
/**
* 监听放缩中
*/
zoomed() {
/*================>>>>>>>>>>>>>>>>>>> 重 点 <<<<<<<<<<<<<<<<<<<<<<=================*/
// 监听svg的放缩，该改变id为forceWrapper的
d3.select('#forceWrapper')
.attr('transform', `
translate(${d3.event.translate}) scale(${d3.event.scale})
`)
},
/**
*
*/
tick() {
// 设置node、link text节点关于位置的属性
nodes.attr('cx', function (d) {
return d.x;
}).attr('cy', function (d) {
return d.y;
});
texts
.attr('dx', function (d) {
return d.x;
})
.attr('dy', function (d) {
return d.y + 35;
})
.text(d => {
return d.name;
});
links.attr('d', function (d) {
let lines = [];
// 这是使用了线段生成器，生成path的路径
lines.push([d.source.x, d.source.y], [d.target.x, d.target.y]);
return linePath(lines);
})
},
/**
* 创建link
*/
links() {
// 切记这里要svg.selectAll('.link') 否则会将path元素创建到body底下 而非svg内
links = svg.selectAll('.link')
.append('path')
.attr('class', 'link')
},
/**
* 创建node节点
*/
nodes() {
nodes = svg.selectAll('.circle')
.append('circle')
.attr('class', 'circle')
},
/**
* 创建text
*/
texts() {
texts = svg.selectAll('.text')
.append('text')
.attr('class', 'text')
},
/**
* 刷新页面数据
*/
refreshForce() {
let newNodeData = [{name: "桂林"}, {name: "广州"},
{name: "厦门"}, {name: "杭州"},
{name: "上海"}, {name: "青岛"},
{name: "天津"}];
let newlinksData = [{source: 0, target: 1}, {source: 0, target: 2},
{source: 0, target: 3}, {source: 1, target: 4},
{source: 1, target: 5}, {source: 1, target: 6}];
// 添加或者修改node数据或者link数据，一定要在原有数组内添加或者删除，不能 this.nodesData = newNodeData这样，想要知道为什么请查看引用类型的特性(堆和栈)
this.nodesData.push(...newNodeData);
this.linksData.push(...newlinksData);
// 重新将数据绑定到link和node上
links = links.data(force.links());
links.enter()
.append('path')
.attr('class', 'link')
.attr('stroke-dasharray', '5 5')
.attr("stroke", '#ccc')
.attr('stroke-width', '3px');
links.append('animate')
.attr('attributeName', 'stroke-dashoffset')
.attr('from', '0')
.attr('to', '-100')
.attr('begin', '0s')
.attr('dur', '3s')
.attr('repeatCount', 'indefinite');
links.exit().remove();
nodes = nodes.data(force.nodes());
// 数据没有对应的node添加circle node
nodes.enter()
.append('circle')
.attr('class', 'circle')
.attr('r', 20)
.attr('fill', '#293152')
.style('cursor', 'pointer')
.call(force.drag()
.on('dragstart', function () {
/*=============重点========*/
// 切记 在force拖拽开始时组织默认时间
d3.event.sourceEvent.stopPropagation()
}));
// 将多余的node节点删除
nodes.exit().remove();
texts = texts.data(force.nodes());
texts.enter()
.append('text')
.attr('class', 'mergeText')
.style('fill', '#000')
.style('font-size', 12)
.style('cursor', 'pointer')
.style('font-weight', 'lighter')
.style('text-anchor', 'middle')
.call(force.drag);
texts.exit().remove();
force.start();
}
}
}
</script>
<style scoped>
</style>
重点：
.call(force.drag()
.on('dragstart', function () {
/*=============重点========*/
// 切记 在force拖拽开始时组织默认时间
d3.event.sourceEvent.stopPropagation()
}));
zoomed() {
/* >>>>>>>>>>>>>>>>>>> 重 点 <<<<<<<<<<<<<<<<<<<<<< */
// 监听svg的放缩，该改变id为forceWrapper的
d3.select('#forceWrapper')
.attr('transform', `
translate(${d3.event.translate}) scale(${d3.event.scale})
`)
}
