资讯专栏INFORMATION COLUMN

G6的插件系统

Ilikewhite / 631人阅读

摘要:的插件系统做的相当完善可惜文档没有具体说到这里整理一下的插件插件大致分为四种类型行为可以理解为事件处理的插件就是和的样式同样是插件插件的布局之类这部分涉及的算法比较多插件就是自定义工具函数将其内置中这四种插件都有各自的写法以及但是文档中没有

G6的插件系统做的相当完善, 可惜文档没有具体说到. 这里整理一下g6的插件.

插件大致分为四种类型:

behaviour 行为, 可以理解为事件处理

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

layout插件, node的布局之类, 这部分涉及的算法比较多

Util插件, 就是自定义工具函数, 将其内置G6.Util中

这四种插件都有各自的写法以及api, 但是文档中没有提到, 这里简单介绍一下. 一下都以官方插件为例.

behaviour 行为

</>复制代码

  1. 写完发现其实官方有这部分的文档: https://www.yuque.com/antv/g6/custom-interaction

请看下面代码, 这部分是注册一个右键拖动的行为:

</>复制代码

  1. // g6/plugins/behaviour.analysis/index.js
  2. function panCanvas(graph, button = "left", panBlank = false) {
  3. let lastPoint;
  4. if (button === "right") {
  5. graph.behaviourOn("contextmenu", ev => {
  6. ev.domEvent.preventDefault();
  7. });
  8. }
  9. graph.behaviourOn("mousedown", ev => {
  10. if (button === "left" && ev.domEvent.button === 0 ||
  11. button === "right" && ev.domEvent.button === 2) {
  12. if (panBlank) {
  13. if (!ev.shape) {
  14. lastPoint = {
  15. x: ev.domX,
  16. y: ev.domY
  17. };
  18. }
  19. } else {
  20. lastPoint = {
  21. x: ev.domX,
  22. y: ev.domY
  23. };
  24. }
  25. }
  26. });
  27. // 鼠标右键拖拽画布空白处平移画布交互
  28. G6.registerBehaviour("rightPanBlank", graph => {
  29. panCanvas(graph, "right", true);
  30. })

然后在实例化graph的时候在modes中引入:

</>复制代码

  1. new Graph({
  2. modes: {
  3. default: ["panCanvas"]
  4. }
  5. })

其实到这里我们已经知道了, 只要是在一些内置事件中注册一下自定义事件再引入我们就可以称之为一个行为插件. 但是我们还需要再深入一点, 看到底是不是这样的.

</>复制代码

  1. // g6/src/mixin/mode.js
  2. behaviourOn(type, fn) {
  3. const eventCache = this._eventCache;
  4. if (!eventCache[type]) {
  5. eventCache[type] = [];
  6. }
  7. eventCache[type].push(fn);
  8. this.on(type, fn);
  9. },

照老虎画猫我们最终可以实现一个自己的行为插件:

</>复制代码

  1. // 未经过验证
  2. function test(graph) {
  3. graph.behaviourOn("mousedown" () => alert(1) )
  4. }
  5. // 鼠标右键拖拽画布空白处平移画布交互
  6. G6.registerBehaviour("test", graph => {
  7. test(graph);
  8. })
  9. new Graph({
  10. modes: {
  11. default: ["test"]
  12. }
  13. })
node, edge的插件

关于node, edge的插件的插件其实官方文档上面的自定义形状和自定义边.

</>复制代码

  1. // g6/plugins/edge.polyline/index.js
  2. G6.registerEdge("polyline", {
  3. offset: 10,
  4. getPath(item) {
  5. const points = item.getPoints();
  6. const source = item.getSource();
  7. const target = item.getTarget();
  8. return this.getPathByPoints(points, source, target);
  9. },
  10. getPathByPoints(points, source, target) {
  11. const polylinePoints = getPolylinePoints(points[0], points[points.length - 1], source, target, this.offset);
  12. // FIXME default
  13. return Util.pointsToPolygon(polylinePoints);
  14. }
  15. });
  16. G6.registerEdge("polyline-round", {
  17. borderRadius: 9,
  18. getPathByPoints(points, source, target) {
  19. const polylinePoints = simplifyPolyline(
  20. getPolylinePoints(points[0], points[points.length - 1], source, target, this.offset)
  21. );
  22. // FIXME default
  23. return getPathWithBorderRadiusByPolyline(polylinePoints, this.borderRadius);
  24. }
  25. }, "polyline");

这部分那么多代码其实最重要的还是上面的部分, 注册一个自定义边, 直接引入就可以在shape中使用了, 具体就不展开了.
自定义边
自定义节点

layout插件

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

</>复制代码

  1. const graph = new G6.Graph({
  2. container: "mountNode",
  3. layout: dagre
  4. })
  5. /* ---- */
  6. const graph = new G6.Graph({
  7. container: "mountNode",
  8. plugins: [ dagre ]
  9. })

原因在于写插件的时候同时也把布局注册为一个插件了:

</>复制代码

  1. // g6/plugins/layout.dagre/index.js
  2. class Plugin {
  3. constructor(options) {
  4. this.options = options;
  5. }
  6. init() {
  7. const graph = this.graph;
  8. graph.on("beforeinit", () => {
  9. const layout = new Layout(this.options);
  10. graph.set("layout", layout);
  11. });
  12. }
  13. }
  14. G6.Plugins["layout.dagre"] = Plugin;

通过查看源码我们可以知道自定义布局的核心方法就是execute, 再具体一点就是我们需要在每个布局插件中都有execute方法:

</>复制代码

  1. // g6/plugins/layout.dagre/layout.js
  2. // 执行布局
  3. execute() {
  4. const nodes = this.nodes;
  5. const edges = this.edges;
  6. const nodeMap = {};
  7. const g = new dagre.graphlib.Graph();
  8. const useEdgeControlPoint = this.useEdgeControlPoint;
  9. g.setGraph({
  10. rankdir: this.getValue("rankdir"),
  11. align: this.getValue("align"),
  12. nodesep: this.getValue("nodesep"),
  13. edgesep: this.getValue("edgesep"),
  14. ranksep: this.getValue("ranksep"),
  15. marginx: this.getValue("marginx"),
  16. marginy: this.getValue("marginy"),
  17. acyclicer: this.getValue("acyclicer"),
  18. ranker: this.getValue("ranker")
  19. });
  20. g.setDefaultEdgeLabel(function() { return {}; });
  21. nodes.forEach(node => {
  22. g.setNode(node.id, { width: node.width, height: node.height });
  23. nodeMap[node.id] = node;
  24. });
  25. edges.forEach(edge => {
  26. g.setEdge(edge.source, edge.target);
  27. });
  28. dagre.layout(g);
  29. g.nodes().forEach(v => {
  30. const node = g.node(v);
  31. nodeMap[v].x = node.x;
  32. nodeMap[v].y = node.y;
  33. });
  34. g.edges().forEach((e, i) => {
  35. const edge = g.edge(e);
  36. if (useEdgeControlPoint) {
  37. edges[i].controlPoints = edge.points.slice(1, edge.points.length - 1);
  38. }
  39. });
  40. }

上面是官方插件有向图的核心代码, 用到了dagre算法, 再简化一点其实可以理解为就是利用某种算法确定节点和边的位置.

最终执行布局的地方:

</>复制代码

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

这类插件相对简单许多, 就是将函数内置到Util中. 最后直接在G6.Util中使用即可

比如一个生成模拟数据的:

</>复制代码

  1. // g6/plugins/util.randomData/index.js
  2. const G6 = require("@antv/g6");
  3. const Util = G6.Util;
  4. const randomData = {
  5. // generate chain graph data
  6. createChainData(num) {
  7. const nodes = [];
  8. const edges = [];
  9. for (let index = 0; index < num; index++) {
  10. nodes.push({
  11. id: index
  12. });
  13. }
  14. nodes.forEach((node, index) => {
  15. const next = nodes[index + 1];
  16. if (next) {
  17. edges.push({
  18. source: node.id,
  19. target: next.id
  20. });
  21. }
  22. });
  23. return {
  24. nodes,
  25. edges
  26. };
  27. },
  28. // generate cyclic graph data
  29. createCyclicData(num) {
  30. const data = randomData.createChainData(num);
  31. const { nodes, edges } = data;
  32. const l = nodes.length;
  33. edges.push({
  34. source: data.nodes[l - 1].id,
  35. target: nodes[0].id
  36. });
  37. return data;
  38. },
  39. // generate num * num nodes without edges
  40. createNodesData(num) {
  41. const nodes = [];
  42. for (let index = 0; index < num * num; index++) {
  43. nodes.push({
  44. id: index
  45. });
  46. }
  47. return {
  48. nodes
  49. };
  50. }
  51. };
  52. Util.mix(Util, randomData);

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

转载请注明本文地址:https://www.ucloud.cn/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元查看
<