D3.js

作为一个前端，说到可视化除了听过 D3.js 的大名，常见的可视化库还有 ECharts、Chart.js，这两个库功能也很强大，但是有一个共同特点是封装层次高，留给开发者可设计和控制的部分太少。和 EChart、Chart.js 等相比，D3.js** 的相对来说自由度会高很多，得益于 D3.js **中的 SVG 画图对事件处理器的支持，D3.js 可将任意数据绑定到文档对象模型（DOM）上，也可以直接操作对象模型（DOM）完成 W3C DOM API 相关操作，对于想要展示自己设计图形的开发者，D3.js 绝对是一个不错的选择。

d3-force 力导向图

以实现一个关系网来说，d3-force 力导向图是不二的选择。d3-force 是 D3.js 实现以模拟粒子物理运动的 velocity Verlet 数值积分器的模块，可用来控制粒子和边秩序。在力导向图中，d3-force 中的每个节点都可以看成是一个放电粒子，粒子间存在某种斥力（库仑斥力）。同时，这些粒子间被它们之间的“边”所牵连，从而产生牵引力。

而 d3-force 中的粒子在斥力和牵引力的作用下，从随机无序的初态不断发生位移，逐渐趋于平衡有序。整个图只有点 / 边，图形实现样例较少且自定义样式居多。

下图就是最简单的关系网图，想要实现自己想要的关系网图，还是动手自己实现一个 D3.js 力导向图最佳。

构建 D3.js 力导向图

在这里实践过程中，我们用 D3.js 力导向图来对图数据库的数据关系进行分析，其节点和关系线直观地体现出图数据库的数据关系，并且还可以关联相对应的图数据库语句完成拓展查询。进阶来说，可通过对文档对象模型（DOM）的直接操作同步到数据库进而更新数据，当然操作这个比较复杂，

D3.js 力导向图的显示优化的更多相关文章

  1. D3.js力导向图(适用于其他类型图)中后添加元素遮盖已有元素的问题解决

    上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...

  2. D3.js力导向图中新增节点及新增关系连线示例

    大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...

  3. D3.js 力导向图

    花了大半天看了一个八十几行的代码..心累 力导向图是之前就有画过很多次的东西,但是这次的代码看上去很陌生,然后发现是D3更新了4.0.... 先贴代码 var svg = d3.select(&quo ...

  4. D3.js 力导向图的制作

    力导向图中每一个节点都受到力的作用而运动,这种是一种非常绚丽的图表. 力导向图(Force-Directed Graph),是绘图的一种算法.在二维或三维空间里配置节点,节点之间用线连接,称为连线. ...

  5. D3.js 力导向图的拖拽（drag）与缩放（zoom）

    不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...

  6. 记录d3.js 力导向图的平移缩放，类似地图导航点击某一项移动到当前位置

    项目中有用到d3.js用于图结构的查询, 需求如下: 右上角有个模糊搜索功能,查询出来的结果用列表展示 点击列表的某一列,要求画布移动到当前选中的节点的位置,基于画布正中间 搜索出来的结果列表展示用的 ...

  7. D3.js 力导向图（气泡+线条+箭头+文字）

    <!DOCTYPE html> <meta charset="utf-8"> <style> .link { fill: none; strok ...

  8. D3.js 力导向图（小气泡围绕中心气泡）

    html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  9. D3.js系列——布局：饼状图和力导向图

    一.饼状图 在布局的应用中,最简单的就是饼状图. 1.数据 有如下数据,需要可视化: , , , , ]; 这样的值是不能直接绘图的.例如绘制饼状图的一个部分,需要知道一段弧的起始角度和终止角度,这些 ...

随机推荐

  1. MyBatis整合Spring原理分析

    目录 MyBatis整合Spring原理分析 MapperScan的秘密 简单总结 假如不结合Spring框架,我们使用MyBatis时的一个典型使用方式如下: public class UserDa ...

  2. Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty messa

    1.git提交的时候遇到: # Please enter the commit message for your changes. Lines starting with '#' will be ig ...

  3. 1047 Student List for Course (25分)

    Zhejiang University has 40,000 students and provides 2,500 courses. Now given the registered course ...

  4. 计算机网络学习笔记NO.2 物理层

    2.1 基本概念 2.1.1 物理层概念 物理层解决如何在连接各种计算机的传输媒体上传输数据比特流,而不是指具体的传输媒体. 物理层主要任务:确定与传输媒体接口有关的一些特性(定义标准) 机械特性:定 ...

  5. 5个最佳WordPress通知栏插件

    作者:品博客 链接:https://blog.pingbook.top/328/ 来源:品博客 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. WordPress通知栏可有效地将 ...

  6. php静态变量的运用

    <?php $count = 5; function get_count() { static $count = 0; return $count++; } echo $count; echo ...

  7. docker 相关操作

    docker-compose down //关闭所有容器 docker-compose up //开启所有容器 docker-compose restart //重启所有容器 单独更新某个容器时用脚本 ...

  8. 《深入理解 Java 虚拟机》读书笔记：晚期（运行期）优化

    正文 在部分商用虚拟机(Sun HotSpot.IBM J9)中,Java 程序最初是通过解释器进行解释执行的,当虚拟机发现某个方法或代码块的运行特别频繁时,就会把这些代码认定为"热点代码& ...

  9. char类型及ASCII码之间比较

    在JAVA中,char类型可以直接运算,char在ASCII等字符编码表中有对应的数值对char类型字符运行时,直接当做ASCII表对应的整数来对待 参考 https://blog.csdn.net/ ...

  10. AJ学IOS（19）UI之QQ好友列表

    AJ分享,必须精品 先看效果图 哈哈,这次猫猫给来个动态的图片,这个看起来带劲 实现思路 首先建立模型 这里用到的是一个双层的模型. cell的实现 这里一看其实就知道是一个tableView,我们自 ...