首页 > 其他分享 >可视化—gojs 超多超实用经验分享(三)

可视化—gojs 超多超实用经验分享(三)

时间:2024-07-17 11:08:25浏览次数:9  
标签:连接线 连线 myDiagram var 可视化 go 超多超 model gojs

目录

32.go.Palette 一排放两个

go.Palette 是 GoJS 库中的一个组件,用于显示一组预定义的图形元素,用户可以从中选择并将其拖放到画布中。如果要在一排中显示两个 go.Palette

一、可以使用 HTML 和 CSS 来控制它们的布局。使用display: inline-blockdiv 元素水平排列在同一行中

<style>
  #palette1,
  #palette2 {
    display: inline-block;
    width: 200px;
    height: 300px;
    border: 1px solid black;
    margin-right: 20px;
  }
</style>

<div id="palette1"></div>
<div id="palette2"></div>
<script>
  var $ = go.GraphObject.make;
  var palette1 = $(go.Palette, "palette1");
  var palette2 = $(go.Palette, "palette2");
</script>

二、(建议)还可以使用gojs自带的属性,完成go.Palette 自定义

  • alignment 属性设置为 go.GridLayout.Position: 使节点从左开始布局。
  • wrappingColumn 属性设置为 2,以确保节点布局为 2 列。
  • cellSizespacing 属性, 控制节点之间的间距和大小。
const myPalette = $(go.Palette, "myPaletteDiv", {
  layout: $(go.GridLayout, {
    alignment: go.GridLayout.Position,
    wrappingColumn: 2,
    cellSize: new go.Size(100, 0),
    spacing: new go.Size(5, 5),
  }),
});

33.go.Palette 基本用法

<div id="myPaletteDiv"></div>
const myPalette = $(go.Palette, "myPaletteDiv", {
    layout: $(go.GridLayout, {
    alignment: go.GridLayout.Position,
    cellSize: new go.Size(100, 0),
    wrappingColumn: 2
})
  nodeTemplate: myDiagram.nodeTemplate,
  model: new go.GraphLinksModel([
    { key: "Alpha", text: "Alpha: Patron" },
    { key: "Beta", text: "Beta: Patron" },
    { key: "Gamma", text: "Gamma: Patron" },
  ]),
});
myPalette.groupTemplateMap.add('groupA', groupATemplate()) // 可以为多组
myPalette.model = new go.GraphLinksModel([ ]) // 属性可以直接写在对象里,也可以后续修复

34.创建自己指向自己的连线

主要是在节点上设置两个属性,

{
  fromLinkableSelfNode: true,
  toLinkableSelfNode: true,
}

35.设置不同的 groupTemplate 和 linkTemplate

可以使用 Group 类型的 groupTemplate 属性来设置不同的组模板。groupTemplate 属性可以接受一个函数,该函数返回一个 Group 类型的模板。
定义了两个不同的组模板,分别使用不同的颜色。使用时会默认读取分组名称。
groupTemplate

myDiagram.groupTemplateMap.add(
  "Group1",
  $(go.Group, "Auto", $(go.Shape, "Rectangle", { fill: "red" }))
);

myDiagram.groupTemplateMap.add(
  "Group2",
  $(go.Group, "Auto", $(go.Shape, "Rectangle", { fill: "green" }))
);

myDiagram.model.addNodeData({ key: 1, isGroup: true, category: "Group1" });
myDiagram.model.addNodeData({ key: 2, isGroup: true, category: "Group2" });

linkTemplate

myDiagram.linkTemplateMap.add(
  "straight", // 直线连接
  $(go.Link, $(go.Shape))
);

myDiagram.linkTemplateMap.add(
  "curved", // 曲线连接
  $(go.Link, { curve: go.Link.Bezier }, $(go.Shape))
);
myDiagram.model.addLinkData({ from: 1, to: 2, category: "straight" });
myDiagram.model.addLinkData({ from: 3, to: 4, category: "curved" });

36.监听在图形对象 GraphObject 上的右键单击

也就是获取 右键点击的对象

myDiagram.addDiagramListener("ObjectContextClicked", function (e) {
  var linkOrNode = myDiagram.findPartAt(e.diagram.firstInput.documentPoint);
  if (linkOrNode instanceof go.Link) {
    //  TODO
  }
  if (linkOrNode instanceof go.Node) {
    //  TODO
  }
});

37.定义节点/连线/canvas 背景上的右键菜单

可以结合 右键点击的对象,进行一些操作,对右键的对象,进行一些 contextMenu 中的操作

myDiagram = $(go.Diagram, "myDiagramDiv", {
  contextMenu: createContextMenu(),
});
myDiagram.nodeTemplate.contextMenu = createContextMenu();
myDiagram.linkTemplate.contextMenu = createContextMenu();

function groupContextMenu() {
  return $(
    "ContextMenu",
    "Vertical",
    $(
      "ContextMenuButton",
      $(
        go.Panel,
        "Horizontal",
        {
          alignment: go.Spot.Left,
        },
        $(go.Picture, "图片src,如果不需要图片可删除", {
          desiredSize: new go.Size(60, 30),
          margin: new go.Margin(5, 5, 5, 10),
        }),
        $(go.TextBlock, "文本")
      ),
      {
        click: (event, obj) => {}, // 右键菜单面板点击事件
      }
    )
  );
}

38.从节点动态拉出一根连线时,判断其方向是左还是右?

可以通过判断连线的起点和终点的位置来确定其方向。具体来说,可以通过比较起点和终点的 x 坐标来判断连线的方向,如果起点的 x 坐标小于终点的 x 坐标,则连线是从左向右的,反之则是从右向左的。

重写了insertLink方法,当用户在节点上开始拖动连线时,会调用该方法。在该方法中首先调用了go.LinkingTool.prototype.insertLink.call(this)来执行默认的连线操作,然后根据起点和终点的位置来设置连线的样式。如果起点的 x 坐标小于终点的 x 坐标,则将连线的颜色设置为绿色,否则将其设置为红色。

// 连线基本模板配置
myDiagram.linkTemplate = $(
  MessageLink,
  { selectionAdorned: true, curviness: 0 },
  $(go.Shape, "Rectangle", new go.Binding("stroke", "stroke").makeTwoWay()),
  $(
    go.Shape,
    { toArrow: "OpenTriangle" },
    new go.Binding("stroke", "stroke").makeTwoWay()
  )
);

// insertLink
go.LinkingTool.prototype.insertLink = function (
  fromnode,
  fromport,
  tonode,
  toport
) {
  var newlink = go.LinkingTool.prototype.insertLink.call(
    this,
    fromnode,
    fromport,
    tonode,
    toport
  );
  if (newlink !== null) {
    var model = this.diagram.model;
    if (fromnode.position.x < tonode.position.x) {
      model.setDataProperty(newlink.data, "stroke", "green"); // 从左向右的连线
    } else {
      model.setDataProperty(newlink.data, "stroke", "red"); // 从左向右的连线
    }
  }
  return newlink;
};

39.linkTemplate routing 取值

linkTemplate 是用于定义连接线的模板。而 routing 是用于定义连接线的路径的属性之一

如果没有设置 routing 属性,连接线的默认路径是 go.Link.Normal。表示连接线会直接从起点到终点的位置。这种路径适用于大多数情况,但在某些情况下可能需要更复杂的路径。 以下值 :

  • go.Link.Normal:连接线会直接从起点到终点的位置。
  • go.Link.JumpOver:连接线会跳过节点,但可能会穿过其他连接线。
  • go.Link.AvoidsNodes:连接线会避开节点,但可能会穿过其他连接线。
  • go.Link.Orthogonal:连接线会沿着水平和垂直方向移动,直到到达目标节点的位置。

40.在移动连线时,改变所有点的位置

在 gojs 中,可以通过重写go.DraggingTool.prototype.moveParts方法来实现移动时改变所有点的位置。具体实现步骤如下:

  1. 获取被移动的部件的所有连接线(links)。
  2. 遍历连接线,获取连接线的路径(path)。
  3. 遍历路径的所有点(points),将每个点的位置加上移动的距离(deltaX 和 deltaY)。
  4. 将修改后的点数组设置回路径的part.points属性中。
MessageDraggingTool.prototype.moveParts = function (parts, offset, check) {
  go.DraggingTool.prototype.moveParts.call(this, parts, offset, check);
  var it = parts.iterator;

  while (it.next()) {
    if (it.key instanceof go.Link) {
      var link = it.key;
      var path = link.path;
      var points = path.part.points;

      if (points.length == 3) {
        // 表示直线
        var startX = it.value.point.x;
        var startY = it.value.point.y;
        var x = startX + offset.x;
        var y = startY + offset.y;
        link.diagram.model.set(link.data, "表示连线定位的字段x", "当前位置x");
        link.diagram.model.set(link.data, "表示连线定位的字段y", "当前位置y");
      } else {
        // 表示曲线
        var pointArray: any = [];
        for (var i = 0; i < points.length; i++) {
          var point = points._dataArray[i];
          pointArray.push(new go.Point(point.x + offset.x, point.y + offset.y));
        }
        path.part.points = pointArray;
      }
    }
  }
};

标签:连接线,连线,myDiagram,var,可视化,go,超多超,model,gojs
From: https://www.cnblogs.com/echoyya/p/17941400

相关文章

  • 通过可视化彻底搞懂 Promise执行逻辑
    JavaScript中的Promise一开始可能会让人感到有些难以理解,但是如果我们能够理解其内部的工作原理,就会发现它们其实是非常易于掌握的。在这篇博客文章中,我们将深入探讨Promise的一些内部机制,并探索它们是如何使得JavaScript能够执行非阻塞的异步任务。一种创建Promise的......
  • R语言极值分析:GEV与GPD模型与MCMC的海洋观测数据极值模拟可视化研究
    全文链接:https://tecdat.cn/?p=37007原文出处:拓端数据部落公众号在海洋科学领域,极端天气和海洋事件如极端海浪、风暴潮和海啸等,对沿海社区、基础设施及生态环境构成了重大威胁。准确预测和评估这些极端事件的强度和频率,对于制定有效的防灾减灾策略至关重要。极值分析作为统......
  • 免费的可视化工具哪里找?看过来!
    面对海量的数据,我们应该如何高效地提取其价值,让复杂的信息一目了然?这正是可视化工具大显身手的舞台。今天,我就来分享几款非常好用的数据可视化工具,它们不仅能够帮助你轻松驾驭数据,还能让你的工作汇报、项目展示更加生动、专业。 一、山海鲸可视化 二维项目制作和私有化部署......
  • GIS需要进行场景编辑?来试试这款免费可视化工具
    如果你正苦恼于如何搞定GIS场景编辑,不妨来试试这款免费可视化工具——山海鲸可视化。经过本人测试,这款软件在GIS场景编辑上完全可以做到“零代码”操作,即使没有任何编程技能也可以在三维GIS世界中如鱼得水。现在,让我们一起来看看这款免费可视化工具如何满足你的GIS场景编辑需求,顺......
  • (开源)都进来!简单易懂、功能强大的权限+可视化流程管理系统
    1、预览地址:http://139.155.137.144:90122、qq群:801913255一、前言随着网络的发展,企业对于信息系统数据的保密工作愈发重视,不同身份、角色对于数据的访问权限都应该大相径庭。列如1、不同登录人员对一个数据列表的可见度是不一样的,如数据列、数据行、数据按钮等......
  • 数据可视化是如何在智慧医疗中应用的?
    在现代智慧医疗的推动下,数据可视化技术正日益成为医疗领域的重要工具。通过将复杂的医疗数据转换为直观的图表和图形,数据可视化不仅提升了医疗服务的效率,还极大地改善了患者的就医体验。在智慧医疗中,数据可视化首先在电子病历管理方面发挥了重要作用。医生可以通过直观的图表快......
  • 数据分享|python分类预测职员离职:逻辑回归、梯度提升、随机森林、XGB、CatBoost、LGB
    全文链接:https://tecdat.cn/?p=34434原文出处:拓端数据部落公众号分析师:ShilinChen离职率是企业保留人才能力的体现。分析预测职员是否有离职趋向有利于企业的人才管理,提升组织职员的心理健康,从而更有利于企业未来的发展。解决方案任务/目标采用分类这一方法构建6种模型对职......
  • 数据分享|R语言决策树和随机森林分类电信公司用户流失churn数据和参数调优、ROC曲线可
    原文链接:http://tecdat.cn/?p=26868最近我们被客户要求撰写关于电信公司用户流失的研究报告,包括一些图形和统计输出。在本教程中,我们将学习覆盖决策树和随机森林。这些是可用于分类或回归的监督学习算法下面的代码将加载本教程所需的包和数据集。  library(tidyverse)......
  • Franka Robot - FAQ - rviz可视化问题
    在VMware中运行Ubuntu20.04并使用ROSNoetic和Gazebo时,如果遇到Gazebo无法显示的问题,可能有以下几个原因及对应的解决方案:1.硬件加速和3D图形设置VMware的3D图形加速设置可能会影响Gazebo的显示。确保在VMware中启用了3D加速。检查和启用3D加速:打开VMware并选择你的Ubuntu......
  • 免费可视化工具如何打造动态销售管理看板?
    在这个数据驱动的时代,销售管理不再仅仅依赖于传统的报表和口头汇报,而是越来越倾向于直观、动态的可视化展示。可视化工具的出现,无疑为中小企业乃至大型企业提供了强大的助力,帮助销售团队构建高效、直观的销售管理看板,让数据说话,决策有据可依。 今天要说的是,如何利用免费工具—......