国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

G6的插件系統

Ilikewhite / 495人閱讀

摘要:的插件系統做的相當完善可惜文檔沒有具體說到這里整理一下的插件插件大致分為四種類型行為可以理解為事件處理的插件就是和的樣式同樣是插件插件的布局之類這部分涉及的算法比較多插件就是自定義工具函數將其內置中這四種插件都有各自的寫法以及但是文檔中沒有

G6的插件系統做的相當完善, 可惜文檔沒有具體說到. 這里整理一下g6的插件.

插件大致分為四種類型:

behaviour 行為, 可以理解為事件處理

node, edge的插件, 就是node和edge的樣式, 同樣是插件

layout插件, node的布局之類, 這部分涉及的算法比較多

Util插件, 就是自定義工具函數, 將其內置G6.Util中

這四種插件都有各自的寫法以及api, 但是文檔中沒有提到, 這里簡單介紹一下. 一下都以官方插件為例.

behaviour 行為
寫完發現其實官方有這部分的文檔: https://www.yuque.com/antv/g6/custom-interaction

請看下面代碼, 這部分是注冊一個右鍵拖動的行為:

// g6/plugins/behaviour.analysis/index.js
function panCanvas(graph, button = "left", panBlank = false) {
  let lastPoint;
  if (button === "right") {
    graph.behaviourOn("contextmenu", ev => {
      ev.domEvent.preventDefault();
    });
  }
  graph.behaviourOn("mousedown", ev => {
    if (button === "left" && ev.domEvent.button === 0 ||
    button === "right" && ev.domEvent.button === 2) {
      if (panBlank) {
        if (!ev.shape) {
          lastPoint = {
            x: ev.domX,
            y: ev.domY
          };
        }
      } else {
        lastPoint = {
          x: ev.domX,
          y: ev.domY
        };
      }
    }
  });


// 鼠標右鍵拖拽畫布空白處平移畫布交互
G6.registerBehaviour("rightPanBlank", graph => {
  panCanvas(graph, "right", true);
})

然后在實例化graph的時候在modes中引入:

new Graph({
  modes: {
    default: ["panCanvas"]
  }
})

其實到這里我們已經知道了, 只要是在一些內置事件中注冊一下自定義事件再引入我們就可以稱之為一個行為插件. 但是我們還需要再深入一點, 看到底是不是這樣的.

// g6/src/mixin/mode.js
behaviourOn(type, fn) {
    const eventCache = this._eventCache;
    if (!eventCache[type]) {
      eventCache[type] = [];
    }
    eventCache[type].push(fn);
    this.on(type, fn);
},

照老虎畫貓我們最終可以實現一個自己的行為插件:

// 未經過驗證
function test(graph) {
 graph.behaviourOn("mousedown" () => alert(1) ) 
}


// 鼠標右鍵拖拽畫布空白處平移畫布交互
G6.registerBehaviour("test", graph => {
  test(graph);
})

new Graph({
  modes: {
    default: ["test"]
  }
})
node, edge的插件

關于node, edge的插件的插件其實官方文檔上面的自定義形狀和自定義邊.

// g6/plugins/edge.polyline/index.js
G6.registerEdge("polyline", {
  offset: 10,
  getPath(item) {
    const points = item.getPoints();
    const source = item.getSource();
    const target = item.getTarget();
    return this.getPathByPoints(points, source, target);
  },
  getPathByPoints(points, source, target) {
    const polylinePoints = getPolylinePoints(points[0], points[points.length - 1], source, target, this.offset);
    // FIXME default
    return Util.pointsToPolygon(polylinePoints);
  }
});

G6.registerEdge("polyline-round", {
  borderRadius: 9,
  getPathByPoints(points, source, target) {
    const polylinePoints = simplifyPolyline(
      getPolylinePoints(points[0], points[points.length - 1], source, target, this.offset)
    );
    // FIXME default
    return getPathWithBorderRadiusByPolyline(polylinePoints, this.borderRadius);
  }
}, "polyline");

這部分那么多代碼其實最重要的還是上面的部分, 注冊一個自定義邊, 直接引入就可以在shape中使用了, 具體就不展開了.
自定義邊
自定義節點

layout插件

layout在初始化的時候即可以在 layout 字段中初始化也可以在plugins中.

const graph = new G6.Graph({
  container: "mountNode",
  layout: dagre
})

/* ---- */

const graph = new G6.Graph({
  container: "mountNode",
  plugins: [ dagre ]
})

原因在于寫插件的時候同時也把布局注冊為一個插件了:

// g6/plugins/layout.dagre/index.js
class Plugin {
  constructor(options) {
    this.options = options;
  }
  init() {
    const graph = this.graph;
    graph.on("beforeinit", () => {
      const layout = new Layout(this.options);
      graph.set("layout", layout);
    });
  }
}

G6.Plugins["layout.dagre"] = Plugin;

通過查看源碼我們可以知道自定義布局的核心方法就是execute, 再具體一點就是我們需要在每個布局插件中都有execute方法:

// g6/plugins/layout.dagre/layout.js
// 執行布局
  execute() {
    const nodes = this.nodes;
    const edges = this.edges;
    const nodeMap = {};
    const g = new dagre.graphlib.Graph();
    const useEdgeControlPoint = this.useEdgeControlPoint;
    g.setGraph({
      rankdir: this.getValue("rankdir"),
      align: this.getValue("align"),
      nodesep: this.getValue("nodesep"),
      edgesep: this.getValue("edgesep"),
      ranksep: this.getValue("ranksep"),
      marginx: this.getValue("marginx"),
      marginy: this.getValue("marginy"),
      acyclicer: this.getValue("acyclicer"),
      ranker: this.getValue("ranker")
    });
    g.setDefaultEdgeLabel(function() { return {}; });
    nodes.forEach(node => {
      g.setNode(node.id, { width: node.width, height: node.height });
      nodeMap[node.id] = node;
    });
    edges.forEach(edge => {
      g.setEdge(edge.source, edge.target);
    });
    dagre.layout(g);
    g.nodes().forEach(v => {
      const node = g.node(v);
      nodeMap[v].x = node.x;
      nodeMap[v].y = node.y;
    });
    g.edges().forEach((e, i) => {
      const edge = g.edge(e);
      if (useEdgeControlPoint) {
        edges[i].controlPoints = edge.points.slice(1, edge.points.length - 1);
      }
    });
  }

上面是官方插件有向圖的核心代碼, 用到了dagre算法, 再簡化一點其實可以理解為就是利用某種算法確定節點和邊的位置.

最終執行布局的地方:

// g6/src/controller/layout.js
graph._executeLayout(processor, nodes, edges, groups)
Util插件

這類插件相對簡單許多, 就是將函數內置到Util中. 最后直接在G6.Util中使用即可

比如一個生成模擬數據的:

// g6/plugins/util.randomData/index.js
const G6 = require("@antv/g6");
const Util = G6.Util;
const randomData = {
  // generate chain graph data
  createChainData(num) {
    const nodes = [];
    const edges = [];
    for (let index = 0; index < num; index++) {
      nodes.push({
        id: index
      });
    }
    nodes.forEach((node, index) => {
      const next = nodes[index + 1];
      if (next) {
        edges.push({
          source: node.id,
          target: next.id
        });
      }
    });
    return {
      nodes,
      edges
    };
  },
  // generate cyclic graph data
  createCyclicData(num) {
    const data = randomData.createChainData(num);
    const { nodes, edges } = data;
    const l = nodes.length;
    edges.push({
      source: data.nodes[l - 1].id,
      target: nodes[0].id
    });
    return data;
  },
  // generate num * num nodes without edges
  createNodesData(num) {
    const nodes = [];
    for (let index = 0; index < num * num; index++) {
      nodes.push({
        id: index
      });
    }
    return {
      nodes
    };
  }
};
Util.mix(Util, randomData);

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

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

相關文章

  • G6 2.0 開源發布 -- 裂變·聚變

    摘要:從年月,立項至今,已經過去了年半的時間。期間獲得過贊譽,也有吐槽,取得一定成就,也暴露過不少問題。這次,我們很高興的告訴大家,今天除了開源,還會開放取得了階段性成果的詳見鏈接。與產品深度融合為了避免和成為工程師閉門造車的產物。 showImg(https://segmentfault.com/img/remote/1460000015199265?w=1500&h=756); G6 是...

    ThinkSNS 評論0 收藏0
  • 初見 g6 圖表庫

    摘要:準備好數據節點節點節點坐標節點坐標邊節點,從哪里出發節點,到哪里結束初始化對象容器渲染位置,表示渲染到圖表的中間位置畫布高渲染數據這是渲染出來的效果。鏈接線會以元素為基準。繪制元素時,需要在初始化對象的時候,指定。 hello world // 1. 準備好數據 // node(節點) let nodes = [ { id: 1, // 節點 id ...

    LittleLiByte 評論0 收藏0
  • 騰訊云:輕量應用服務器免費升級配置活動,1核2G6M免費升配2核4G6M

    摘要:騰訊云輕量應用服務器免費升級配置活動開始中騰訊云的活動真的越來越良心了,前幾天剛剛出了一個免費領取一年的核輕量應用服務器活動。騰訊云輕量應用服務器免費升級配置活動開始中!騰訊云的活動真的越來越良心了,前幾天剛剛出了一個免費領取一年的2核4G輕量應用服務器活動。今天,騰訊云又出了一個輕量應用云服務器升級配置的活動,通過邀請五個好友進行助力,可以將1核2G6M免費升配2核4G6M,好友只需要點擊...

    Shonim 評論0 收藏0
  • 騰訊云,免費升配活動,可將180元/3年1核2G6M云服務器免費升配至2核4G6M

    摘要:內存硬盤帶寬月流量價格購買核元年鏈接核元年鏈接核元年鏈接核元年鏈接活動內容活動時間年月日年月日活動對象騰訊云官網已注冊且完成實名認證的國內站用戶均可參與協作者與子用戶賬號除外發起助力購買后,別忘記來這里發起你的助力活動。騰訊云輕量應用服務器周年慶免費升配活動開始,也就是周年感恩回饋活動,加量不加價再返場!1核2G6M免費升配2核4G6M,如何玩呢? 只要你購買了秒殺活動中的1核2G6M...

    joywek 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<