D3 完全不需要通过力导向图来处理拓扑数据

xiguadada 发布于2019-08-22 10:45 / 620人阅读

摘要：哎，其实完全可以不用力导向图布局来处理拓扑图的，力导向图来处理也并不合适。初始化数据数据转换处理可以通过力导向图或者自己处理就行得到数据主要是链路可绘制坐标一开始以为，力导向图链路得到的链路数据，会随着节点数据位置变化而更新。

http://codepen.io/jingxiao/pe...

https://bl.ocks.org/mbostock/...
哎，其实完全可以不用力导向图布局来处理拓扑图的，力导向图来处理也并不合适。
之前只是使用力导向图来初始化得到可以绘制的链路数据，节点数据是原始数据，通过力导向图布局也并没有做处理。

但是这组数据，完全可以自己处理，使用力导向图体现了“力”的相互作用，所以初始化也会有冷却时间，引入了tick事件，这个事件包含了拓扑所有元素的坐标更新，这个事件就是在冷却时间间隔不断去触发绘制。当一个节点进行拖拽的时候，也会触发这个事件。但是这个事件会更新所有元素，这样并不好。

而实际上，拓扑节点拖拽不必要调用tick事件引发所有元素坐标位置更新，基本上就拖拽节点和相关链路的坐标位置有更新。
初始化数据

var nodes = [{
        "id": 1,
        "ip": "1.1.1.1",
        "r": 20,
        "x": 200,
        "y": 300
    }, {
        "id": 2,
        "ip": "1.1.1.2",
        "r": 30,
        "x": 300,
        "y": 300
    }, {
        "id": 3,
        "ip": "1.1.1.3",
        "r": 15,
        "x": 450,
        "y": 200
    }, {
        "id": 4,
        "ip": "1.1.1.4",
        "r": 20,
        "x": 450,
        "y": 400
    }];
    var links = [{
        "source": 1,
        "target": 2
    }, {
        "source": 2,
        "target": 3
    }, {
        "source": 2,
        "target": 4
    }];
    
    // 数据转换
    links.some(function(v, i) {
        nodes.some(function(w, j) {
            if (v.source == w.id) {
                v.source = w;
            }
            if (v.target == w.id) {
                v.target = w;
            }
        });
        v.index = ++i;
    });

处理（可以通过力导向图或者自己处理就行）得到数据主要是链路可绘制坐标

一开始以为，力导向图链路得到的链路数据，会随着节点数据位置变化而更新。一开始以为这个功能是力导向图原因实现的关系。后来发现，这完全是引用数据类型的原因。

恩，不用力导向图了。

云服务器私有云力导向布局不完全不通过大数据处理需要超级计算机吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91180.html

D3js之入门

摘要：子选集直接通过返回，和子选集分别通过和返回。截止上面也并不是非得用不可，就是一些插入操作，原生也是可以实现的。相对于echart, highchart等其他图表库算是一个比较底层的可视化工具，简单来讲他不提供任何一种现成的图表，所有的图表都是我们在它的库里挑选合适的方法构建而成。基于上面的理解，d3无疑会复杂很多但是也强大自由的多，另外因为d3基于svg所以修改图表的样式和结构也会...

guqiu 2019-08-22 16:13 评论0 收藏0
D3.js绘制实时映射的缩略图

摘要：在做可视化的很多时候，我们需要在主图的一角设置一个缩略图来掌握全局情况。，缩略图的绘制完成，很简单的例子，按照这个思路可以完成大部分可视化的缩略图绘制。在做可视化的很多时候，我们需要在主图的一角设置一个缩略图来掌握全局情况。本次将使用力导向图作为例子，完成缩略图的实现。绘制的原理就是依靠主图的数据再画一个图出来，无需再次计算，只改变图形形态。最终效果主图节点拖动，缩略图跟着变化...

miqt 2019-08-21 16:47 评论0 收藏0
d3-force 力导图源码解读与原理分析【二：四叉树（一）】

摘要：我们在上文源码解析发现版的节点碰撞采用四叉树进行了优化。那么版本的力导图具体和版的有何不同点呢，四叉树又如何优化碰撞校验的呢原文链接被重命名为。性能的提高归功于的新的四叉树。我们在上文源码解析发现v4版的节点碰撞采用四叉树进行了优化。那么V4版本的力导图具体和v3版的有何不同点呢，四叉树又如何优化碰撞校验的呢？ v3-force VS v4-force https://github...

pepperwang 2019-08-20 15:32 评论0 收藏0
D3力导向图及树状布局变换

摘要：绘制力导向图新建画布创建，的绘制中为了避免混乱及后续事件的添加，建议使用标签将画布分组。用拷贝数组，避免影响全局数据。将数据整理为树状结构使用树状布局计算位置重启布局以改变位置在运动前强制修改节点坐标为树状结构 D3力导向图及树状布局变换 d3的力导向图是表现关系型数据比较方便且直观的方法，但是会遇到节点比较多且层级关系混乱的情况，这时树状布局就比较方便了，如何不破坏原来结构以最小的代...

canopus4u 2019-08-21 16:48 评论0 收藏0
SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0