clay教程二之布局的使用

Forest10 發布于2019-08-23 12:49 / 2747人閱讀

摘要：上圖是布局的計算模型。刪除方法刪除的只是布局保存的數據，然后重繪畫面，如果你需要畫面平滑改變，修改繪圖實現方法即可，這里不再贅述。

作者：心葉
時間：2018-11-06 14:47

clay項目Github地址：https://github.com/yelloxing/...

喜歡本項目的可以在github上給給star。

在繪制一些常見圖形的時候，比如關系圖，單個結點或連線并不難，麻煩的是位置的計算等，和圖形模塊不同，布局就是專門計算一些特殊圖形位置的模塊，用一句通俗的話說就是：決定什么元素繪制在哪里。因此，布局應該和具體的繪圖方法無關，她只關心位置的計算。

下面，我們將通過介紹一個最簡單的樹圖的繪制過程來說明布局的設計理念，讓我們開始吧！

繪制圖形

$$("").appendTo("body")
    .attr("width", "400")
    .attr("height", "400");

上圖是最終運行結果，上面我們準備好了畫布，需要繪圖的原始數據如下：

var nodes = [
    // 結點名稱、父節點名稱
    ["手繪", null],
    ["水粉", "手繪"],
    ["油畫", "手繪"],
    ["素描", "手繪"],
    ["中國畫", "手繪"],
    ["空間透視", "素描"],
    ["色彩五大調", "素描"],
];

使用布局繪圖的第一步是創建布局對象，這里是創建tree布局對象：

// 創建布局對象
var tree = clay.treeLayout();

理論上來說，原始數據可以是任意格式，只要保證整體是一個數組即可。這主要是考慮到實際開發復雜的環境，因此，提供了數據格式配置接口，對于上面的數據，進行如下配置：

tree
// 獲取根結點
.root(function (initTree) {
    return initTree[0];
})

// 獲取孩子結點
.child(function (parentTree, initTree) {
    var children = [], i;
    for (i = 0; i < nodes.length; i++) {
        if (initTree[i][2] == parentTree[0])
            children.push(initTree[i]);
    }
    return children;
})

// 獲取結點標志id
.id(function (treedata) {
    return treedata[0];
})

不同布局需要配置的項不一樣，對于tree布局而言，關于數據結構的部分，只需要告訴她如何根據父結點獲取子結點，一個結點的唯一標識怎么確定，根節點是誰。

開頭就說明的很清楚了，布局應該是和具體繪圖方式無關的存在，因此，這里我們選擇了svg繪圖，就需要再配置一下具體的繪圖方法。

tree.drawer(function (nodes, rootid, size) {
    var i, node;
    for (i in nodes) {
        node = nodes[i];

        // 繪制結點
        $$("")
            .appendTo(".node")
            .attr("cx", node.left * 100)
            .attr("cy", node.top * 100);

        // 繪制文字
        $$("" + node.data[0] + "")
            .appendTo(".text")
            .attr("x", node.left * 100)
            .attr("y", (node.top * 100 - 14));

        // 繪制連線
        if (node.pid)
            $$("")
                .appendTo(".line")
                .attr("d",
                    "M" + nodes[node.pid].left * 100 + " " + nodes[node.pid].top * 100 + "C" +
                    (nodes[node.pid].left * 100 + 50) + "," + nodes[node.pid].top * 100 + " " +
                    (node.left * 100 - 50) + "," + node.top * 100 + " " +
                    node.left * 100 + "," + node.top * 100 + " ");
    }
});

到這里，所有必須的配置都寫好了，添加下面這行代碼，啟動繪圖：

tree(nodes);

至此，運行代碼就可以看見一棵記錄著結點關系的樹圖了，繪圖結束！

計算模型

因為布局不會知道最終繪制的圖形具體是什么樣子，比如這里的樹布局，也許你想繪制的是旋轉的樹或倒樹，也可能你就是想要和這里一樣的簡單樹。為了防止問題復雜化，布局在計算位置的時候，都會統一選擇一種最樸素的場景作為計算模型，從該模型出發，任何別的模型借助clay提供的一些計算方法實現起來就很容易了。

上圖是tree布局的計算模型。右邊的每個紅色矩形都是一個1x1的正方形，坐標原心位于左上角綠色頂點。

配置具體繪圖方式的時候，其中第一個參數nodes就記錄了每個結點經過布局計算后的位置信息，讓我們打印一下其中的一條數據看看：

"油畫":{
    children: [];
    data: (2) ["油畫", "手繪"];
    id: "油畫";
    left: 1.5;
    pid: "手繪";
    show: true;
    top: 1.5
}

其中data記錄著結點的原始數據，我們主要看看left和top，這顯示該結點應該繪制的坐標為（1.5,1.5），對照上圖，是不是就很清晰了。別的布局的設計思想也是如此，請耐心體會一下！

添加交互

// 添加交互用例
$$("circle").bind("click", function () {
    // 刪除結點
    tree.delete($$(this).attr("target"));
});

其實交互和布局應該是沒有關系的，始終強調，布局只負責計算繪圖的位置，比如上面的結點刪除例子，綁定點擊事件，調用結點的刪除結點方法即可。刪除方法刪除的只是布局保存的數據，然后重繪畫面，如果你需要畫面平滑改變，修改繪圖實現方法即可，這里不再贅述。

例子完整代碼：https://yelloxing.github.io/c...

GPU云服務器云服務器 linux的使用教程 java的使用教程服務器的使用教程 css布局教程

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99028.html

零基礎如何學爬蟲技術

摘要：楚江數據是專業的互聯網數據技術服務，現整理出零基礎如何學爬蟲技術以供學習，。本文來源知乎作者路人甲鏈接楚江數據提供網站數據采集和爬蟲軟件定制開發服務，服務范圍涵蓋社交網絡電子商務分類信息學術研究等。楚江數據是專業的互聯網數據技術服務，現整理出零基礎如何學爬蟲技術以供學習，http://www.chujiangdata.com。第一：Python爬蟲學習系列教程（來源于某博主：htt...

KunMinX 2019-07-25 11:29 評論0 收藏0
使用clay.js繪制一棵圓形樹

摘要：需要說明目前，開發環境已經準備好了，因為繪制樹圖，我們需要模擬數據，你可以在這里下載數據我們要繪制一棵圓形樹，一點點顯示，你可以最終代碼，查看效果然后在瀏覽器中打開即可查看效果。余下的就是繪制圖形了。作者：心葉時間：2019-01-23 17:55 溫馨提示：clay.js已經停止維護，項目遷移到https://github.com/yelloxing/... 準備環境我們需要用...

FingerLiu 2019-08-30 15:55 評論0 收藏0
數據可視化之clay:設計思想和建立初衷

摘要：然而，的設計思想和他們不同，是包容而非競爭。建立目的首先，本項目是為了端數據可視化而建立的，如果用更通俗的話說，就是為了方便使用繪制各種和圖形來反映統計的數據，并且繪制的圖形是可交互的。作者：心葉時間：2018-05-01 19:28 clay項目Github地址：https://github.com/yelloxing/... showImg(https://segmentfaul...

XFLY 2019-08-29 17:20 評論0 收藏0
PHP新特性之閉包、匿名函數

摘要：閉包閉包是什么閉包和匿名函數在中被引入。可以將匿名函數和閉包視作相同的概念。閉包和字符串或整數一樣，是一等值類型。何時使用我們通常把閉包當做函數和方法的回調使用。閉包閉包是什么？ 1).閉包和匿名函數在PHP5.3中被引入。2).閉包是指在創建時封裝函數周圍狀態的函數，即使閉包所在的環境不存在了，閉包封裝的狀態依然存在，這一點和Javascript的閉包特性很相似。3).匿名函數就...

luzhuqun 2019-06-27 17:07 評論0 收藏0
python綜合學習二之多進程

摘要：本節講學習的多進程。和之前的的不同點是丟向的函數有返回值，而的沒有返回值。所以接下來讓我們來看下這兩個進程是否會出現沖突。本節講學習Python的多進程。一、多進程和多線程比較多進程 Multiprocessing 和多線程 threading 類似, 他們都是在 python 中用來并行運算的. 不過既然有了 threading, 為什么 Python 還要出一個 multip...

gityuan 2019-07-30 17:37 評論0 收藏0