利用Javascript框架——D3.js制作力导向关系图普

最新推荐文章于 2024-08-15 09:14:52 发布

siriva

最新推荐文章于 2024-08-15 09:14:52 发布

阅读量1w

点赞数 3

文章标签： d3 d3.js javascript 数据可视化

本文链接：https://blog.csdn.net/rosemarryTop/article/details/75063318

版权

因公司业务需求，整理制作了一个实用且酷炫力导向关系图。下面是我自己的一个demo。先Po一下成品图（自己做的数据偏少）：

图1：
这里写图片描述

1)、引入D3框架，这里引入的版本是v3.0

图2：
这里写图片描述

2)、数据整理（数据结构如下图）

图3：

这里写图片描述

图3：

这里写图片描述

数据解析：数据准备是很重要的一部分。Jstr由两个部分组成：‘nodes’、‘links’，主要数据为‘nodes’，‘links’表示数据之间的联系。‘nodes’部分每条数据由‘name’、‘group’、‘index’组成，可大致理解为按‘group’分组（图一中橘黄色的圆圈为一组、紫色的为一组、蓝色的为一组），‘index’表示此数据的唯一标识。‘links’部分每条数据由‘source’、‘target’组成，‘source’表示源头，‘target’表示指向的目标。如图1中‘中国’指向‘四川’这条线，中国为源头，所以source’为‘nodes’中‘中国’的index即0，target为‘四川’的的index，即3。

3)下面附上代码并做详细讲解

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>D3制作力导向关系图</title>
</head>
<body>
<div class="container" id="main_2"></div>
<script type='text/javascript' src='js/jquery-3.1.1.min.js'></script>
<script src="js/d3.v3.min.js"></script>
<script type="text/javascript">
    var index = 0;
    var width = 1140, height = 1000;
    var color = ["#FF8000", "#9393FF", "#0080FF"];
    var force = d3.layout.force()/*layout将json格式转化为力学图可用的格式*/
            .linkDistance(80)/*指定结点连接线的距离，默认为20*/
            .charge(-600)/*顶点的电荷数。该参数决定是排斥还是吸引，数值越小越互相排斥*/
            .size([width, height]);/*作用域*/