d3-v4.x版本-力导向图

v4.x 版本-力导向图

代码是基于vue 2.x版本项目中，代码注释部分为关键点解释都是基于d3-v4.x版本的。

demo实现效果图如下：

每个节点都可以进行拖拽，并伴随力矩的效果

 

实现代码如下：（包含关键代码注释）

<template>
  <div class="page">
  </div>
</template>

<script>
const d3 = require("d3");
export default {
  mounted: function() {
    this.$nextTick(function() {
      var dataset = {
        nodes: [
          { name: "Adam" },
          { name: "Bob" },
          { name: "Carrie" },
          { name: "Donovan" },
          { name: "Edward" },
          { name: "Felicity" },
          { name: "George" },
          { name: "Hannah" },
          { name: "Iris" },
          { nam