一. Api使用
- d3.forceSimulation() ,新建一个力导向图,
- d3.forceSimulation().force(),添加或者移除一个力
- d3.forceSimulation().nodes(),输入是一个数组,然后将这个输入的数组进行一定的数据转换
- d3.forceLink.links(),这里输入的也是一个数组(边集),然后对输入的边集进行转换
- tick函数,这个函数对于力导向图来说非常重要,因为力导向图是不断运动的,每一时刻都在发生更新,所以需要不断更新节点和连线的位置
- d3.drag(),是力导向图可以被拖动
二. vue使用
<template lang='pug'>
div.force-pane(:id="id")
svg
</template>
<script>
/**
* 力导向图
*/
import * as d3 from 'd3'
let gs = '',
forceSimulation = '',
links = '',
linksText = ''
let nodes = [{ name: '湖南' }, { name: '毛泽东' }, { name: '主席' }]
let edges = [
{ source: 0, target: 1, relation: '籍贯', value: 1.3 },
{ source: 1, target: 2, relation: '职责', value: 1 }
]
export default {
name: 'Scale',
data() {
return {
id: ''
}
},
methods: {
uuid() {
function s4() {