<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() {
// 創(chuàng)建svg
svg = d3.select('.force')
.append('svg')
.attr('width', this.width)
.attr('height', this.height)
// 在svg上添加放縮行為
.call(d3.behavior.zoom()
.on('zoom', this.zoomed)) // 監(jiān)聽放縮中
.append('g')
.attr('id', 'forceWrapper');
},
/**
* 初始化力導向圖
*/
initForce() {
force = d3.layout.force()
.nodes(this.nodesData) // 設定或獲取力導向圖的節(jié)點數(shù)組
.links(this.linksData) // 設置或獲取力導向如布局的連線數(shù)組
.size([this.width, this.height]) // 設定或獲取力導向圖的作用范圍
.linkDistance(200) // 設置連線的距離
.charge(-400)// 設置節(jié)點的電荷數(shù)
.on('tick', this.tick); // 動畫的計算進入下一步
},
/**
* 監(jiān)聽放縮中
*/
zoomed() {
/*================>>>>>>>>>>>>>>>>>>> 重 點 <<<<<<<<<<<<<<<<<<<<<<=================*/
// 監(jiān)聽svg的放縮呢诬，該改變id為forceWrapper的
d3.select('#forceWrapper')
.attr('transform', `
translate(${d3.event.translate}) scale(${d3.event.scale})
`)
},
/**
*
*/
tick() {
// 設置node丈莺、link text節(jié)點關于位置的屬性
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);
})
},
/**
* 創(chuàng)建link
*/
links() {
// 切記這里要svg.selectAll('.link') 否則會將path元素創(chuàng)建到body底下 而非svg內(nèi)
links = svg.selectAll('.link')
.append('path')
.attr('class', 'link')
},
/**
* 創(chuàng)建node節(jié)點
*/
nodes() {
nodes = svg.selectAll('.circle')
.append('circle')
.attr('class', 'circle')
},
/**
* 創(chuàng)建text
*/
texts() {
texts = svg.selectAll('.text')
.append('text')
.attr('class', 'text')
},
/**
* 刷新頁面數(shù)據(jù)
*/
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數(shù)據(jù)或者link數(shù)據(jù)具滴，一定要在原有數(shù)組內(nèi)添加或者刪除，不能 this.nodesData = newNodeData這樣反镇，想要知道為什么請查看引用類型的特性(堆和棧)
this.nodesData.push(...newNodeData);
this.linksData.push(...newlinksData);
// 重新將數(shù)據(jù)綁定到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());
// 數(shù)據(jù)沒有對應的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節(jié)點刪除
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() {
/* >>>>>>>>>>>>>>>>>>> 重 點 <<<<<<<<<<<<<<<<<<<<<< */
// 監(jiān)聽svg的放縮奋蔚，該改變id為forceWrapper的
d3.select('#forceWrapper')
.attr('transform', `
translate(${d3.event.translate}) scale(${d3.event.scale})
`)
}
