问题

需要展示复杂的力导向图，通过neo4j的实例代码可以知道，使用d3.js来处理相关前端渲染。这里通过集成vue3，vite来使用D3.js v7版本。

解决

Vite+Vue3

创建vue工程：

npm init vue@latest

配置：

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-d3v7
✔ Target directory "vue-d3v7" is not empty. Remove existing files and continue? … yes
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /Users/zhangyalin/Downloads/vue-d3v7...

Done. Now run:

  cd vue-d3v7
  npm install
  npm run dev

安装依赖：

  npm install

运行工程：

  npm run dev

vite.config.js

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 开启sourcemap配置
  css:{
    devSourcemap: true
  },
  build:{
    sourcemap: true
  }
})

d3 v7

npm i d3@latest 

在项目中安装d3最新版本,注意这里使用的d3的v7版本。

D3v7.vue

创建自定义vue组件

<script setup>
import * as d3 from "d3";
function go() {
  const width = 600, height = 1000;

  const color = d3.scaleOrdinal(d3.schemeCategory10);

  const types = ["CITED_BY"]

  const strokeWidth = 1.5


  // d3.json("/api/article/graph").then(function(data) {

    // let graph = data.data;
    let graph = {
      "links": [
        { "source": "18470926", "target": "10097404", "type": "CITED_BY" }
      ],
      "nodes": [
        {
          "label": "Article",
          "id": "18470926"
        },
        {
          "label": "Article",
          "id": "10097404"
        }
      ]
    };
    const simulation = d3.forceSimulation(graph.nodes)
        .force("charge", d3.forceManyBody().strength(-3000))
        .force("x", d3.forceX(width / 2).strength(1))
        .force("y", d3.forceY(height / 2).strength(1))
        .force("link", d3.forceLink(graph.links).id(function(d) {return d.id; }).distance(50).strength(1))
        .on("tick", ticked);

    const svg = d3.select("#graph").append("svg")
        .attr("width", width).attr("height",height)
        .attr("pointer-events", "all");

    // Per-type markers, as they don't inherit styles.
    svg.append("defs").selectAll("marker")
        .data(types)
        .join("marker")
        .attr("id", d => `arrow-${d}`)
        .attr("viewBox", "0 0 10 10")
        .attr("refX", 10)
        .attr("refY", 5)
        .attr("markerUnits", strokeWidth)
        .attr("markerWidth", 10)
        .attr("markerHeight", 10)
        .attr("orient", "auto")
        .append("path")
        .attr("fill", color)
        .attr("d", 'M 0 0 L 10 5 L 0 10 z');

    const link = svg.append("g")
        .selectAll("g")
        .data(graph.links)
        .enter()
        .append("line")
        .attr("stroke", d => color(d.type))
        .attr("stroke-width", strokeWidth)
        .attr("marker-end", d => `url(${new URL(`#arrow-${d.type}`, location)})`);

    const node = svg.append("g")
        .selectAll("g")
        .data(graph.nodes)
        .enter().append("g");

    node.append("circle")
        .attr("r", 5)
        .attr("fill", function(d) { return color(d.label); })

    node.call(
        d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended)
    );
    node.append("text")
        .text(function(d) {
          return d.id;
        })
        .attr('x', 6)
        .attr('y', 3).style('fill', 'white');

    node.append("title")
        .text(function(d) { return d.label; });

    function ticked() {

      node.call(updateNode);
      link.call(updateLink);

    }

    function fixna(x) {
      if (isFinite(x)) return x;
      return 0;
    }

    function updateLink(link) {
      link.attr("x1", function(d) { return fixna(d.source.x); })
          .attr("y1", function(d) { return fixna(d.source.y); })
          .attr("x2", function(d) { return fixna(d.target.x); })
          .attr("y2", function(d) { return fixna(d.target.y); });
    }

    function updateNode(node) {
      node.attr("transform", function(d) {
        return "translate(" + fixna(d.x) + "," + fixna(d.y) + ")";
      });
    }

    function dragstarted(event, d) {
      event.sourceEvent.stopPropagation();
      if (!event.active) simulation.alphaTarget(0.3).restart();
      d.fx = d.x;
      d.fy = d.y;
    }

    function dragged(event, d) {
      d.fx = event.x;
      d.fy = event.y;
    }

    function dragended(event, d) {
      if (!event.active) simulation.alphaTarget(0);
      d.fx = null;
      d.fy = null;
    }

  // });
}

</script>
<template>
  <button @click="go">Go</button>
  <div id="graph">

  </div>
</template>



<style scoped>

</style>

App.vue

使用自定义组件：

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import D3v7 from './components/D3v7.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <D3v7 />
  </main>
</template>

<style>
@import './assets/base.css';

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;

  font-weight: normal;
}

header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 2rem;
  }

  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }

  .logo {
    margin: 0 2rem 0 0;
  }
}
</style>

验证

npm run dev

效果：

源代码

https://github.com/fxtxz2/vue-d3v7

参考：

• D3.js
• Vue3 Quick Start
• D3 npm
• svg画箭头
• Force directed graph for D3.js v4 with labelled edges and arrows
• D3 V6 force-directed graph with directional straight arrows
• 力导向图

一、背景

力导向图非常适合于渲染关系型信息图。

二、什么是力导向图(Force-directed)？

我们可以把整张 Network 想象成一个物理仿真系统(Simulation)。系统中的每个节点(Node)都是一个带有能量的粒子，粒子与粒子之间存在斥力（如模拟库伦斥力），而被边(Link)所连结的粒子受到牵引力（如模拟胡克弹力）。系统中的粒子在斥力和引力的不断作用下，从随机无序的布局(Layout)不断发生位移，逐渐趋于平衡有序的布局。同时整个仿真系统的能量也在不断消耗，经过数次迭代后，粒子之间不再发生相对位移，整个系统达到最终稳定平衡的状态。

此动效实现的本质就是每一帧都重新渲染图中节点的位置(x,y), 节点的位置(x,y)是由节点上一帧所处的位置(x,y)+速度(vx,vy)所决定的。而速度就是通过力学模型所计算出来的。

关键在于力(Forces)，D3.js 中内置了几种经典的力模型：

1. 中心力(Centering)

中心力可以使得节点最终布局是围绕着某个中心的。相当于某个中心点对所有的节点都有一个制约，不会让布局的中心偏离。

2. 碰撞力(Collision)

• 碰撞力为每个节点都设定一个圆形的碰撞区域，从而防止节点之间重叠。
• 关键参数：radius 碰撞半径

3. 牵引力(Links)

• 牵引力的强度与节点之间的距离成正比，类似于弹簧力。
• 关键参数：distance。影响两个节点之间的最终距离。

4. N 体力(Many-Body)

N体问题是天体力学的一种力学模型，它研究 N 个质点相互之间在万有引力作用下的运动规律。

• Many-Body 力是作用于所有节点之间的，是全局的，任何两个节点之间都将受到此力的影响。（与 牵引力 Links 不同，Links 力仅仅会影响有连接关系的两个节点）
• 它可以用来模拟引力（吸引力），只需设置的 strength 参数为正数；
• 它也可用来模拟电荷力（排斥力），只需设置的 strength 参数为负数。
• 实现算法使用了 the Barnes–Hut approximation（通过将平面不断递归地划分成四个小区域来构建一棵四叉树） 来提高性能；

5. 方向力(Positioning)

方向力分为 X 方向和 Y 方向，即将作用力限制在一个维度上（ X 维度或者 Y 维度）

说明

• 以上这几个力学模型是 D3.js 封装的几个经典力学模型，开发者也可根据自身的业务场景，应用自定义的力模型；
• 力模型是可以多重复叠加的，即可同时叠加中心力、碰撞力、牵引力等等；

三、最终效果

通过控制右侧面板，所见即所得地为 Chart 添加不同的力，用户可灵活定制想要的效果。

今天遇到个问题就是把json(里面nodes和edges属性)文件通过D3.js展示出来，下午终于弄出来了，写篇博客记录一下。
先展示一下效果图：

放大后是这个效果：

什么是力导向图

D3.js官网：http://d3js.org/
D3.js github:https://github.com/d3/d3
力导向图（Force-Directed Graph），是绘图的一种算法。在二维或三维空间里配置节点，节点之间用线连接，称为连线。各连线的长度几乎相等，且尽可能不相交。节点和连线都被施加了力的作用，力是根据节点和连线的相对位置计算的。根据力的作用，来计算节点和连线的运动轨迹，并不断降低它们的能量，最终达到一种能量很低的安定状态。

添加d3.js

//我使用的是v4，v3不能这样使用，具体看API
<script src="https://d3js.org/d3.v4.min.js"></script>

定义canvas画板

var width = 900 ,
   height = 600,
   dataset,
var svg = d3.select("body").append("svg"),

构建布局

 /* 相关API
d3.forceSimulation - 创建一个力模拟。
simulation.restart - 重启力模拟。
simulation.stop - 停止力模拟。
simulation.tick - 将力模拟向前推进一步。
simulation.nodes - 设置力模拟的节点。
simulation.alpha - 设置当前的α值。
simulation.alphaMin -设置α最小阈值。
simulation.alphaDecay - 设置α指数衰减率。
simulation.alphaTarget - 设置目标α。
simulation.drag - 设置曳引系数。
simulation.force - 添加或移除力。
simulation.fix - 固定节点位置。
simulation.unfix - 释放固定的节点。
simulation.find - 查找给定位置最近的节点。
simulation.on - 添加或移除事件监听器。
force - 应用力模拟。
force.initialize - 使用给定的节点初始化力布局。
d3.forceCenter - 创建一个力中心。
center.x - 设置中心的x-坐标。
center.y - 设置中心的y-坐标。
d3.forceCollide - 创建一个圆碰撞力。
collide.radius - 设置圆的半径。
collide.strength - 设置碰撞检测强度。
collide.iterations - 设置迭代次数。
d3.forceLink - 创建连接力。
link.links - 设置连接数组。
link.id - 连接数组。
link.distance - 设置连接距离。
link.strength - 设置连接强度。
link.iterations - 设置迭代次数。
d3.forceManyBody - 创建多体力。
manyBody.strength - 设置力强度。
manyBody.theta - 设置Barnes-Hut近似精度。
manyBody.distanceMin - 当节点关闭限制力。
manyBody.distanceMax - 当节点太远限制力。
d3.forceX - 创建x-定位力。
x.strength - 设置力强度。
x.x - 设置目标x-坐标。
d3.forceY - 创建y-定位力。
y.strength - 设置力强度。
y.y - 设置目标y-坐标。
*/

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

加载数据

(说明：加载数据我以实际遇到的为标准，因为在真正的项目中我们必然使用的是加载数据)

d3.json("dd.json", function(error, data) {
  if (error) throw error;
    dataset = data;

数据放入布局中

simulation
      .nodes(dataset.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(dataset.edges);

绘制node和edge

//加载连线
var link = g.selectAll("line")
    .data(graph.edges)
    .enter().append("line")
    .attr("stroke",function (d) { return d.color; })
    .attr("stroke-width", function(d) { return d.size; })
    .call(d3.zoom()
        .scaleExtent([-5, 2])
        .on("zoom", zoomed));
//加载圆
  var node = g.selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })
      .attr("r", function(d) { return d.size; })
      .attr("fill", function(d) { return d.color; })
      .on("click",click)//收起子节点
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended))；
   function dragstarted(d) {
      if (!d3.event.active) simulation.alphaTarget(0.3).restart();
      d.fx = d.x;
      d.fy = d.y;
    }

    function dragged(d) {
      d.fx = d3.event.x;
      d.fy = d3.event.y;
    }

    function dragended(d) {
      if (!d3.event.active) simulation.alphaTarget(0);
      d.fx = null;
      d.fy = null;
    }

   //加载label
  node.append("title")
      .text(function(d) { return d.id; });

添加tick函数(必须)

tick函数的作用：由于力导向图是不断运动的，每一时刻都在发生更新，因此，必须不断更新节点和连线的位置。
力导向图布局 force 有一个事件 tick，每进行到一个时刻，都要调用它，更新的内容就写在它的监听器里就好。

function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }

最后

推荐几个比较的学习网站：
https://bl.ocks.org/mbostock
http://www.ourd3js.com/
https://github.com/tianxuzhang/d3.v4-API-Translation#hierarchies
http://blockbuilder.org/search#d3version=v4