【D3.js 学习记录】——Force 力导图数据可视化

zqqcee

于 2021-08-07 16:32:35 发布

阅读量1.7k

点赞数 2

分类专栏：数据可视化文章标签：可视化 d3.js js

本文链接：https://blog.csdn.net/RRie1/article/details/119488615

版权

数据可视化专栏收录该内容

14 篇文章 6 订阅

订阅专栏

Force 力导图

对数据结构要求比较严格
forceSimulation() 与一般的data join不太一样，可以理解为它是d3这么一个大的可视化库中的一个小库

运作机制

输入一批结点List

let nodes = [{},{},{},{}]
set simulation = d3.forceSimulation(nodes)

定义simulation后会发生：

补全 nodes 中每个结点的数据结构
index（编号），x，y（相对于画布的坐标），vx，vy（两个方向上的速度）
开始模拟粒子运动
- 粒子质量为1
- 不断通过内部 timer 触发 ‘tick’ 事件
根据一系列的 ‘力’ 来计算每个粒子的加速度，速度，位置

三个属性

d3.forceManyBody

粒子之间两两作用的力，如果为正就互相吸引，为负就互相排斥
strength 为正互相吸引，为负则互相排斥
即规定是万有引力还是万有斥力，数值是力的大小

d3.forceCenter

指向某一个中心的力，会尽可能让粒子向中心靠近或重合（通常定位画布中央）

d3.forceLink

粒子之间两两的作用力
让互相之间有link的节点保持一个特定的距离
在保持一定距离的前提下，没有力
若超出该范围，就会多增加一个力
给图连边用的，最后要设置strength和distance，strength规定了力的大小，distance规定了两两结点连边的距离范围

tick事件

d3.forceSimulation()通过tick事件来更新节点的状态的，状态包括位置，速度，加速度等

更新后的状态仅仅为状态

不会反映到任何图元
仅对数据进行修改

人为设置每次tick要如何更新图元

simulation.on('tick',ticked);

配置simulation

在初始化每个图元后，只要为simulation配置了’tick’的回调，simulation会自动开始模拟。
注意：simulation.stop()会停止timer的tick循环

配置simulation一般用上文介绍的三个属性：

d3.forceLink
d3.forceCenter
d3.forceManyBody

图形数据

外层object

在这里插入图片描述

内层links

在这里插入图片描述

代码实现

实现分为4个步骤

数据预处理

links = data.links //边的集合
//创建一个节点的集合
nodes = [];
for (let i  = 0 ; i < data['#nodes'] ; i++){
    nodes.push({'index': i })
}

图元初始化，data join

const render_init = function(){
    lines = svg.selectAll('line').data(links)
        .join('line')
        .attr('stroke', 'black')
        .attr('opacity', 1)
        .attr('stroke-width', 1);

    circles = svg.selectAll('circle').data(nodes)
        .enter().append('circle')
        .attr('r', 5)
        .attr('fill', 'blue')
    // .call(drag);
}

力模拟

simulation = d3.forceSimulation(nodes)
        .force('manybody', d3.forceManyBody().strength(-30))
        .force('center', d3.forceCenter(width/2,height/2))
        .force('link',d3.forceLink(links).strength(0.1).distance(100))

将模拟的力反应在图元上，用ticked更新图元

let circle,line;
const ticked = function(){
lines.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y);
circles
.attr('cx', d => d.x)
.attr('cy', d => d.y);
};

simulation.on('tick',ticked)

所有调用流程如下

d3.json('datapath').then(data => {
    data-preprocessing();//预处理
    render_init();//图元初始化
    simulation();//力模拟
    simulation.on('tick',tick);//tick
})

可视化代码

<!DOCTYPE html>
<html>
  <head>
    <title>Force</title>
    <script src="./js/d3.min.js"></script>
  </head>
  <body>
    <svg width="1800" height="920" id="mainsvg" class="svgs"></svg>
    <script>
    let svg = d3.select('#mainsvg');
    var width = svg.attr('width'), height = svg.attr('height');
    let nodes, links;
    let circles, lines;

    let simulation;

const render_init = function(){
        lines = svg.selectAll('line').data(links)
        .join('line')
        .attr('stroke', 'black')
        .attr('opacity', 1)
        .attr('stroke-width', 1);

        circles = svg.selectAll('circle').data(nodes)
        .enter().append('circle')
        .attr('r', 5)
        .attr('fill', 'blue')
        // .call(drag);
    }



    const ticked = function(){
        lines.attr('x1', d => d.source.x)
        .attr('y1', d => d.source.y)
        .attr('x2', d => d.target.x)
        .attr('y2', d => d.target.y);

        circles
        .attr('cx', d => d.x)
        .attr('cy', d => d.y);
    }


    d3.json('./data/socfb-Caltech36.json').then(data => {
        links = data.links
        //创建一个节点的集合
        nodes = [];
        for (let i  = 0 ; i < data['#nodes'] ; i++){
            nodes.push({'index': i })
        }

        console.log(nodes);

        render_init(); //图元初始化，datajoin line 和 circle
        simulation = d3.forceSimulation(nodes)
        .force('manybody', d3.forceManyBody().strength(-30))
        .force('center', d3.forceCenter(width/2,height/2))
        .force('link',d3.forceLink(links).strength(0.1).distance(100))
        .on('tick',ticked)

    })


    </script>
  </body>
</html>

可视化效果

在这里插入图片描述

zqqcee

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
【D3.js 学习记录】——Force 力导图数据可视化

Force 力导图对数据结构要求比较严格forceSimulation() 与一般的data join不太一样，可以理解为它是d3这么一个大的可视化库中的一个小库运作机制输入一批结点Listlet nodes = [{},{},{},{}]set simulation = d3.forceSimulation(nodes)定义simulation后会发生：补全 nodes 中每个结点的数据结构index（编号），x，y（相对于画布的坐标），vx，vy（两个方向上的速度）开始模拟粒
复制链接

扫一扫