D3.js中Force-Directed Graph详解

2021-6-9    前端达人

Force-Directed Graph

聊一聊力导向图。力导向图在echarts等快捷的可视化工具中都有非常方便的实现方式。来看看d3.js是如何实现的。
先来一张d3.js官网实现的力导向图的照片：

接下来解释一下d3.js中实现此力导向图的过程。

index.html——源码 

<!DOCTYPE html> <meta charset="utf-8"> <style> .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } </style> <svg width="960" height="600"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> // 定义一个svg画布 var svg = d3.select("svg"), // 获取svg画布的宽度 width = +svg.attr("width"), // 获取svg画布的高度 height = +svg.attr("height"); // 定义一个颜色函数 // d3.scaleOrdinal()函数用来定义一个序列，其中的参数d3.schemeCategory20代表序 // 列函数的值域，这里d3.schemeCategory20指的是由RGB十六进制字符串表示的二十种分类 // 颜色的数组。因此，color()函数的值域就是离散的20中颜色值 var color = d3.scaleOrdinal(d3.schemeCategory20); // 创建一个力学模拟器 // d3.forceSimulation()函数用来创建一个空的模拟器 var simulation = d3.forceSimulation() // simulation.force(name,[force])函数的作用是：如果指定了力force，则为指 // 定的名称name分配力并返回该模拟。 如果未指定力，则返回具有指定名称的力，如果 // 没这样的力，则返回undefined。 （默认情况下，新的模拟没有力量。） // d3.forceLink()函数用来创建一个空的link力数组 // d3.forceLink().id()用来指定link力数组中每个节点的id的获取方式 .force("link", d3.forceLink().id(function(d) { return d.id; })) // 创建一个charge数组，forceManyBody()返回一个新的多体力数组 .force("charge", d3.forceManyBody()) // d3.forceCenter()用指定的x坐标和y坐标创建一个新的居中力。 // 如果未指定x和y，则默认为⟨0,0⟩。 .force("center", d3.forceCenter(width / 2, height / 2)); // 读取数据，该例子中的数据是雨果的《悲惨世界》中的人物关系信息。 // 通过力学模拟，人物关系相近的节点会比较接近；反之，节点会比较疏远 d3.json("miserables.json", function(error, graph) { if (error) throw error; // 定义人物节点之间连线的信息 var link = svg.append("g")
      .attr("class", "links") // 用line元素来绘制  .selectAll("line") // 绑定json文件中的links数据 .data(graph.links)
    .enter().append("line") // 人物节点之间连接线的粗细通过连接线的value字段来计算，value越大，连接线  // 越粗 .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); // 定义人物节点信息 var node = svg.append("g")
      .attr("class", "nodes") // 人物节点通过圆来绘制  .selectAll("circle") // 为人物节点绑定nodes数据 .data(graph.nodes)
    .enter().append("circle") // 设置节点半径 .attr("r", 5) // 设置节点的填充色，通过节点的group属性来计算节点的填充颜色 .attr("fill", function(d) { return color(d.group); }) // 以定义的这些人物节点为参数，调用drag()函数 // 绑定拖拽函数的三个钩子，即拖拽开始、拖拽中、拖拽结束 .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended)); //为人物节点绑定文字 node.append("title")
      .text(function(d) { return d.id; }); // 为力模拟器绑定节点数据 // 会为每个节点自动添加可视化时所需的index,vx,xy,x,y五个字段信息 // 并且为simulation内部计时器tick监听绑定动作，来绘制图形 simulation
      .nodes(graph.nodes)
      .on("tick", ticked);// 此处在每次tick时绘制力导向图 // 为力模拟器绑定连接线数据 // 调用结束后，会为每个连接线添加可视化时所需要的index,vx,vy,x,y五个字段信息 simulation.force("link")
      .links(graph.links); // 定义simulation内部计时器tick每次结束时的动作 function ticked() { // 每次tick计时到时，连接线的响应动作 // 设置连接线两端的节点的位置 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; }); // 每次tick计时到时，节点的响应动作 // 设置节点的圆心坐标 node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
}); // 定义开始拖拽节点时的动作 function dragstarted(d) { // restart()方法重新启动模拟器的内部计时器并返回模拟器。  // 与simulation.alphaTarget或simulation.alpha一起使用时，此方法可用于在交互 // 过程中进行“重新加热”模拟，例如在拖动节点时，在simulation.stop暂停之后恢复模 // 拟。 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;
} </script>

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    • 

    
  • 
        65
    
    • 

    
  • 
        66
    
    • 

    
  • 
        67
    
    • 

    
  • 
        68
    
    • 

    
  • 
        69
    
    • 

    
  • 
        70
    
    • 

    
  • 
        71
    
    • 

    
  • 
        72
    
    • 

    
  • 
        73
    
    • 

    
  • 
        74
    
    • 

    
  • 
        75
    
    • 

    
  • 
        76
    
    • 

    
  • 
        77
    
    • 

    
  • 
        78
    
    • 

    
  • 
        79
    
    • 

    
  • 
        80
    
    • 

    
  • 
        81
    
    • 

    
  • 
        82
    
    • 

    
  • 
        83
    
    • 

    
  • 
        84
    
    • 

    
  • 
        85
    
    • 

    
  • 
        86
    
    • 

    
  • 
        87
    
    • 

    
  • 
        88
    
    • 

    
  • 
        89
    
    • 

    
  • 
        90
    
    • 

    
  • 
        91
    
    • 

    
  • 
        92
    
    • 

    
  • 
        93
    
    • 

    
  • 
        94
    
    • 

    
  • 
        95
    
    • 

    
  • 
        96
    
    • 

    
  • 
        97
    
    • 

    
  • 
        98
    
    • 

    
  • 
        99
    
    • 

    
  • 
        100
    
    • 

    
  • 
        101
    
    • 

    
  • 
        102
    
    • 

    
  • 
        103
    
    • 

    
  • 
        104
    
    • 

    
  • 
        105
    
    • 

    
  • 
        106
    
    • 

    
  • 
        107
    
    • 

    
  • 
        108
    
    • 

    
  • 
        109
    
    • 

    
  • 
        110
    
    • 

    
  • 
        111
    
    • 

    
  • 
        112
    
    • 

    
  • 
        113
    
    • 

    
  • 
        114
    
    • 

    
  • 
        115
    
    • 

    
  • 
        116
    
    • 

    
  • 
        117
    
    • 

    
  • 
        118
    
    • 

    
  • 
        119
    
    • 

    
  • 
        120
    
    • 

    
  • 
        121
    
    • 

    
  • 
        122
    
    • 

    
  • 
        123
    
    • 

    
  • 
        124
    
    • 

    
  • 
        125
    
    • 

    
  • 
        126
    
    • 

    
  • 
        127
    
    • 

    
  • 
        128
    
    • 

    
  • 
        129
    
    • 

    
  • 
        130
    
    • 

    
  • 
        131
    
    • 

    
  • 
        132
    
    • 

    
  • 
        133
    
    • 

    
  • 
        134
    
    • 

    
  • 
        135
    
    • 

    
  • 
        136
    
    • 

    
  • 
        137
    
    • 

    
  • 
        138
    
    • 

    
  • 
        139
    
    • 

    
  • 
        140
    
    • 

    
  • 
        141
    
    • 

    
  • 
        142
    
    • 

    
  • 
        143
    
    • 

    
  • 
        144
    
    • 

    
  • 
        145
    
    •

至此，力导向图解析完毕，这篇中有很多关于力学的专业的功能函数，理解起来有点难度。今天周日，起床后第一件事就是把这篇完结了，欧耶~

这篇文

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

截屏2021-05-13 上午11.41.03.png


部分借鉴自：csdn  

原文链接：

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

分享本文至：
« 3D与UI结合的设计探索 jquery获取焦点和失去焦点事件代码 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档