D3 完全不需要通過力導向圖來處理拓撲數據

xiguadada 發布于2019-08-22 10:45 / 737人閱讀

摘要：哎，其實完全可以不用力導向圖布局來處理拓撲圖的，力導向圖來處理也并不合適。初始化數據數據轉換處理可以通過力導向圖或者自己處理就行得到數據主要是鏈路可繪制坐標一開始以為，力導向圖鏈路得到的鏈路數據，會隨著節點數據位置變化而更新。

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;
    });

處理（可以通過力導向圖或者自己處理就行）得到數據主要是鏈路可繪制坐標

一開始以為，力導向圖鏈路得到的鏈路數據，會隨著節點數據位置變化而更新。一開始以為這個功能是力導向圖原因實現的關系。后來發現，這完全是引用數據類型的原因。

恩，不用力導向圖了。

GPU云服務器云服務器力導向布局不完全不通過大數據處理需要超級計算機嗎

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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