D3.js的V5版本-Vue框架中使用(第九章) ---力导向图_vue d3力导向图

一. 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: ''