d3 - 建立力引导图将知识图谱可视化 (一)

最新推荐文章于 2026-05-04 02:23:29 发布

原创

最新推荐文章于 2026-05-04 02:23:29 发布 · 6.5k 阅读

标签

#知识图谱 #echarts #javascript

本文要实现的功能与这个网页比较类似: KGBuilder知识图谱可视化

使用到的插件为: d3
没有采用echarts等实现的原因是: echarts比较死板, 有些需求不能实现, 而d3可以灵活的制作出想要的图表.

d3的引用/安装

在线方式:
可以在 <head></head>中插入 <script src="/https://d3js.org/d3.v5.min.js"></script>:

<head>
	<script src="https://d3js.org/d3.v5.min.js"></script>
</head>

下载安装

npm install d3 --save-dev

或者

cnpm install d3 --save-dev

组件中引入:

import * as d3 from 'd3';

vue中直接使用下面的可能会遇到一些问题, 可以参考: d3 -力引导图(四) vue项目中的使用及可能遇到的问题

基础知识

在绘制d3图形之前, 有一些基础知识需要掌握, 后续绘制图表的时候才不会太吃力.
主要是 SVG图形和 d3的一些基础知识.

带 * 号的是推荐必看的, 对d3的基础语法讲解的比较细致清晰, 可以帮助很快上手.

实例

有了一些基础后, 我们来看一个实例, 本实例的来源于: D3.js的v5版本入门教程（第六章）——做一个简单的图表, 如果能理解下面的代码在做什么, 就已经掌握了d3基础的语法.
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
    <svg></svg>
    <script>
        var marge = {
   
   top:60,bottom:60,left:0,right:60}//设置边距
        var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）

        var svg = d3.select("svg");//得到svg画布
    	var g = svg.append("g")//定义一个用来装整个图表的一个分组，并设置他的位置
    		.attr("transform","translate("+marge.top+","+marge.left+")");

        var rectHeight = 30;//设置每一个矩形的高度
    	
    	g.selectAll("rect")
    		.data(dataset)
    		.enter()
    		.append("rect") // 添加足够的条形表
    		.attr("x",20)//设置左上点的x
    		.attr("y",function(d,i){
   
   //设置左上点的y, i表示的是索引号
    			return i*rectHeight;
    		})
    		.attr("width",function(d){
   
   //设置宽
    			return d;
    		})
    		.attr("height",rectHeight-5)//设置长
    		.attr("fill","blue");//颜色填充
    </script>
</body>
</html>

d3绘制力引导图

为了绘制力引导图, 我们还需要新学习几个知识点:

如何新建一个力导向图: d3.forceSimulation()
如何添加或者移除一个力: d3.forceSimulation().force()
如何绘制节点
绘制节点采用的是SVG图中的 circle 标签, 阮一峰SVG教程中给出的介绍如下:
如何绘制连线
绘制连线采用的SVG图中的 line 标签, 阮一峰SVG教程中给出的介绍如下:
如何绑定数据: d3绑定数据
如何绘制两个节点之间的连线, 将连线与节点联系起来:

举个例子, 有下面的数据:

当我们绘制节点后, nodes中会新增一些数据:
在这里插入图片描述

那么, 我们在绘制连线时, 就可以将连线的起始位置分别设置为两个节点的位置, 来实现在两个节点之间连线的目的.

比如有下面的数据:
在这里插入图片描述
我们在绘制连线时, 将 line 标签的 x1,y1,x2,y2 分别设置为source和target节点的x和y, 就可以实现节点间的连线了 (注: 绿色方框这里的n是指的每条连线.)

(其他参考例子: 基础知识二：网页端利用d3.js将json数据进行可视化展示 )

注意: 力引导图要想实现节点之间的连线, 在连线的对象中必须有source和target (分别指向起始节点), 不然会报错; 默认是索引.

下面是两个例子:
(1) 默认是索引
(源代码来自: CSDN)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
    <svg width="960" height="600"></svg>
    <script>
    	var marge = {
     
     top:60,bottom:60,left:60,right:60}
    	var svg = d3.select("svg")
    	var width = svg.attr("width")
    	var height = svg.attr("height")
    	var g = svg.append("g")
    		.attr("transform","translate("+marge.top+","+marge.left+")");
    		
    	//准备数据
    	var nodes = [
    		{
     
     name: