成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

D3 完全不需要通過力導(dǎo)向圖來處理拓撲數(shù)據(jù)

xiguadada / 784人閱讀

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

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

https://bl.ocks.org/mbostock/...
哎，其實完全可以不用力導(dǎo)向圖布局來處理拓撲圖的，力導(dǎo)向圖來處理也并不合適。
之前只是使用力導(dǎo)向圖來初始化得到可以繪制的鏈路數(shù)據(jù)，節(jié)點數(shù)據(jù)是原始數(shù)據(jù)，通過力導(dǎo)向圖布局也并沒有做處理。

但是這組數(shù)據(jù)，完全可以自己處理，使用力導(dǎo)向圖體現(xiàn)了“力”的相互作用，所以初始化也會有冷卻時間，引入了tick事件，這個事件包含了拓撲所有元素的坐標(biāo)更新，這個事件就是在冷卻時間間隔不斷去觸發(fā)繪制。當(dāng)一個節(jié)點進行拖拽的時候，也會觸發(fā)這個事件。但是這個事件會更新所有元素，這樣并不好。

而實際上，拓撲節(jié)點拖拽不必要調(diào)用tick事件引發(fā)所有元素坐標(biāo)位置更新，基本上就拖拽節(jié)點和相關(guān)鏈路的坐標(biāo)位置有更新。
初始化數(shù)據(jù)

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
    }];
    
    // 數(shù)據(jù)轉(zhuǎn)換
    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;
    });

處理（可以通過力導(dǎo)向圖或者自己處理就行）得到數(shù)據(jù)主要是鏈路可繪制坐標(biāo)

一開始以為，力導(dǎo)向圖鏈路得到的鏈路數(shù)據(jù)，會隨著節(jié)點數(shù)據(jù)位置變化而更新。一開始以為這個功能是力導(dǎo)向圖原因?qū)崿F(xiàn)的關(guān)系。后來發(fā)現(xiàn)，這完全是引用數(shù)據(jù)類型的原因。

恩，不用力導(dǎo)向圖了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/91180.html

相關(guān)文章

  • D3js之入門

    摘要：子選集直接通過返回，和子選集分別通過和返回。截止上面也并不是非得用不可，就是一些插入操作，原生也是可以實現(xiàn)的。 相對于echart, highchart等其他圖表庫算是一個比較底層的可視化工具，簡單來講他不提供任何一種現(xiàn)成的圖表，所有的圖表都是我們在它的庫里挑選合適的方法構(gòu)建而成。 基于上面的理解，d3無疑會復(fù)雜很多但是也強大自由的多，另外因為d3基于svg所以修改圖表的樣式和結(jié)構(gòu)也會...

    guqiu 評論0 收藏0

  • D3.js繪制實時映射的縮略圖

    摘要：在做可視化的很多時候，我們需要在主圖的一角設(shè)置一個縮略圖來掌握全局情況。，縮略圖的繪制完成，很簡單的例子，按照這個思路可以完成大部分可視化的縮略圖繪制。 在做可視化的很多時候，我們需要在主圖的一角設(shè)置一個縮略圖來掌握全局情況。本次將使用力導(dǎo)向圖作為例子，完成縮略圖的實現(xiàn)。 繪制的原理就是依靠主圖的數(shù)據(jù)再畫一個圖出來，無需再次計算，只改變圖形形態(tài)。 最終效果 主圖節(jié)點拖動，縮略圖跟著變化...

    miqt 評論0 收藏0

  • d3-force 力導(dǎo)圖 源碼解讀與原理分析【二 ： 四叉樹（一）】

    摘要：我們在上文源碼解析發(fā)現(xiàn)版的節(jié)點碰撞采用四叉樹進行了優(yōu)化。那么版本的力導(dǎo)圖具體和版的有何不同點呢，四叉樹又如何優(yōu)化碰撞校驗的呢原文鏈接被重命名為。性能的提高歸功于的新的四叉樹。 我們在上文源碼解析發(fā)現(xiàn)v4版的節(jié)點碰撞采用四叉樹進行了優(yōu)化。那么V4版本的力導(dǎo)圖具體和v3版的有何不同點呢，四叉樹又如何優(yōu)化碰撞校驗的呢？ v3-force VS v4-force https://github...

    pepperwang 評論0 收藏0

  • D3力導(dǎo)向圖及樹狀布局變換

    摘要：繪制力導(dǎo)向圖新建畫布創(chuàng)建，的繪制中為了避免混亂及后續(xù)事件的添加，建議使用標(biāo)簽將畫布分組。用拷貝數(shù)組，避免影響全局數(shù)據(jù)。將數(shù)據(jù)整理為樹狀結(jié)構(gòu)使用樹狀布局計算位置重啟布局以改變位置在運動前強制修改節(jié)點坐標(biāo)為樹狀結(jié)構(gòu) D3力導(dǎo)向圖及樹狀布局變換 d3的力導(dǎo)向圖是表現(xiàn)關(guān)系型數(shù)據(jù)比較方便且直觀的方法，但是會遇到節(jié)點比較多且層級關(guān)系混亂的情況，這時樹狀布局就比較方便了，如何不破壞原來結(jié)構(gòu)以最小的代...

    canopus4u 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.35 - WebGL：打開網(wǎng)頁看大片

    摘要：在文末，我會附上一個可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一，它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...

    objc94 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<