javascript - 如何获取连接的mxgraph之间的父子关系-6ren

javascript - 如何获取连接的mxgraph之间的父子关系

转载作者：IT老高更新时间：2023-10-28 23:08:40

我正在尝试简化连接 mxgraph

之间的关系

问题:一旦绘制了图表，我正在尝试获得简化的关系。

我正在尝试获取 json 中连接 Node 之间的关系。

注意:解决方案必须适用于每个绘制状态。

这里是代码笔:

https://codepen.io/eabangalore/pen/pmELpL

我想从上面的代码片段中获取关系。

预期输出(来自绘制的关系):

[
  {"id":0,"parent":"#","text":"A","child":[{"cid":1,"connectionText":"Bangalore"}]},
  {"id":1,"parent":0,"text":"B","child":[{"cid":2,"connectionText":""}]},
  {"id":2,"parent":1,"text":"C","child":[{"cid":null,"connectionText":""}]}
];

请引用codepen，因为下面的代码段不起作用。

<!--
  Copyright (c) 2006-2013, JGraph Ltd
  
  Dynamic toolbar example for mxGraph. This example demonstrates changing the
  state of the toolbar at runtime.
-->
<html>
<head>
	<title>Toolbar example for mxGraph</title>

	<!-- Sets the basepath for the library if not in same directory -->
  <script type="text/javascript">
    mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
    
    function setGraphData(){
      var graphState ={"tagName":"mxGraphModel","children":[{"tagName":"root","children":[{"tagName":"mxCell","attributes":{"id":"0"}},{"tagName":"mxCell","attributes":{"id":"1","parent":"0"}},{"tagName":"mxCell","attributes":{"id":"2","value":"A","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"271.56251525878906","y":"82.44792175292969","width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"3","value":"B","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"678.2291717529297","y":"106.89236450195312","width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"4","value":"Bangalore","edge":"1","parent":"1","source":"2","target":"3"},"children":[{"tagName":"mxGeometry","attributes":{"relative":"1","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"5","value":"C","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"1013.7847747802734","y":"83.55902862548828","width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"6","edge":"1","parent":"1","source":"3","target":"5"},"children":[{"tagName":"mxGeometry","attributes":{"relative":"1","as":"geometry"}}]}]}]};
      
      localStorage.setItem('graphState',JSON.stringify(graphState));
    }
    
    	function html2json(html){
		if(html.nodeType==3){
			return {
				"tagName":"#text",
				"content":html.textContent
			}
		}
		var element = {
			"tagName":html.tagName
		};

		if(html.getAttributeNames().length>0){
			element.attributes = html.getAttributeNames().reduce(
				function(acc,at){acc[at]=html.getAttribute(at); return acc;},
				{}
			);
		}

		if(html.childNodes.length>0){
			element.children = Array.from(html.childNodes)
				.filter(
					function(el){
						return el.nodeType!=3
						||el.textContent.trim().length>0
					})
				.map(function(el){return html2json(el);});
		}
		return element;
	}

	function json2html(json){
		var xmlDoc = document.implementation.createDocument(null, json.tagName);

		var addAttributes = function(jsonNode, node){
			if(jsonNode.attributes){
				Object.keys(jsonNode.attributes).map(
					function(name){
						node.setAttribute(name,jsonNode.attributes[name]);
					}
				);
			}
		}

		var addChildren = function(jsonNode,node){
			if(jsonNode.children){
				jsonNode.children.map(
					function(jsonChildNode){
						json2htmlNode(jsonChildNode,node);
					}
				);
			}
		}

		var json2htmlNode = function(jsonNode,parent){
			if(jsonNode.tagName=="#text"){
				return xmlDoc.createTextNode(jsonNode.content);
			}

			var node = xmlDoc.createElement(jsonNode.tagName);

			addAttributes(jsonNode,node);
			addChildren(jsonNode,node);

			parent.appendChild(node);
		}

		addAttributes(json,xmlDoc.firstElementChild);
		addChildren(json,xmlDoc.firstElementChild);

		return xmlDoc;
	}
  </script>

  <!-- Loads and initializes the library -->
  <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>

	<!-- Example code -->
	<script type="text/javascript">
		// Program starts here. Creates a sample graph in the
		// DOM node with the specified ID. This function is invoked
		// from the onLoad event handler of the document (see below).
		function main()
		{
      setGraphData();
			// Checks if browser is supported
			if (!mxClient.isBrowserSupported())
			{
				// Displays an error message if the browser is
				// not supported.
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// Defines an icon for creating new connections in the connection handler.
				// This will automatically disable the highlighting of the source vertex.
				mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);

				// Creates the div for the toolbar
				var tbContainer = document.createElement('div');
				tbContainer.style.position = 'absolute';
				tbContainer.style.overflow = 'hidden';
				tbContainer.style.padding = '2px';
				tbContainer.style.left = '0px';
				tbContainer.style.top = '0px';
				tbContainer.style.width = '24px';
				tbContainer.style.bottom = '0px';
				
				document.body.appendChild(tbContainer);
			
				// Creates new toolbar without event processing
				var toolbar = new mxToolbar(tbContainer);
				toolbar.enabled = false
				
				// Creates the div for the graph
				var container = document.createElement('div');
				container.style.position = 'absolute';
				container.style.overflow = 'hidden';
				container.style.left = '24px';
				container.style.top = '0px';
				container.style.right = '0px';
				container.style.bottom = '0px';
				container.style.background = 'url("editors/images/grid.gif")';

				document.body.appendChild(container);
				
				// Workaround for Internet Explorer ignoring certain styles
				if (mxClient.IS_QUIRKS)
				{
					document.body.style.overflow = 'hidden';
					new mxDivResizer(tbContainer);
					new mxDivResizer(container);
				}
	
				// Creates the model and the graph inside the container
				// using the fastest rendering available on the browser
				var model = new mxGraphModel();
				var graph = new mxGraph(container, model);

				// Enables new connections in the graph
				graph.setConnectable(true);
				graph.setMultigraph(false);

				// Stops editing on enter or escape keypress
				var keyHandler = new mxKeyHandler(graph);
				var rubberband = new mxRubberband(graph);
				
				var addVertex = function(icon, w, h, style)
				{
					var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
					vertex.setVertex(true);
				
					var img = addToolbarItem(graph, toolbar, vertex, icon);
					img.enabled = true;
					
					graph.getSelectionModel().addListener(mxEvent.CHANGE, function()
					{
						var tmp = graph.isSelectionEmpty();
						mxUtils.setOpacity(img, (tmp) ? 100 : 20);
						img.enabled = tmp;
					});
				};
				
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rectangle.gif', 100, 40, '');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rounded.gif', 100, 40, 'shape=rounded');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/ellipse.gif', 40, 40, 'shape=ellipse');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rhombus.gif', 40, 40, 'shape=rhombus');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/triangle.gif', 40, 40, 'shape=triangle');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/cylinder.gif', 40, 40, 'shape=cylinder');
				addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/actor.gif', 30, 40, 'shape=actor');
        
        
       				// read state on load 
				if(window.localStorage.graphState){	
					var doc = json2html(JSON.parse(localStorage.graphState));	
					var dec = new mxCodec(doc);
					dec.decode(doc.documentElement, graph.getModel());
				}

				// save state on change
				graph.getModel().addListener('change',function(){
						var codec = new mxCodec();		
						window.localStorage.graphState = JSON.stringify(html2json(codec.encode(
							graph.getModel()
						)));
				});
			}
		}

		function addToolbarItem(graph, toolbar, prototype, image)
		{
			// Function that is executed when the image is dropped on
			// the graph. The cell argument points to the cell under
			// the mousepointer if there is one.
			var funct = function(graph, evt, cell, x, y)
			{
				graph.stopEditing(false);

				var vertex = graph.getModel().cloneCell(prototype);
				vertex.geometry.x = x;
				vertex.geometry.y = y;
					
				graph.addCell(vertex);
				graph.setSelectionCell(vertex);
			}
			
			// Creates the image which is used as the drag icon (preview)
			var img = toolbar.addMode(null, image, function(evt, cell)
			{
				var pt = this.graph.getPointForEvent(evt);
				funct(graph, evt, cell, pt.x, pt.y);
			});
			
			// Disables dragging if element is disabled. This is a workaround
			// for wrong event order in IE. Following is a dummy listener that
			// is invoked as the last listener in IE.
			mxEvent.addListener(img, 'mousedown', function(evt)
			{
				// do nothing
			});
			
			// This listener is always called first before any other listener
			// in all browsers.
			mxEvent.addListener(img, 'mousedown', function(evt)
			{
				if (img.enabled == false)
				{
					mxEvent.consume(evt);
				}
			});
						
			mxUtils.makeDraggable(img, graph, funct);
			
			return img;
		}

	</script>
</head>

<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
<body onload="main();" >
</body>
</html>

请帮助我提前谢谢!!!

最佳答案

查看此 CodePen 链接，其中包含您提供的代码段的修改版本。在其中，您可以添加新元素并更改文本，并查看表示图中关系的更新 json 字符串:https://codepen.io/tien-q-nguyen2/pen/GaQXBO

从我第一次发布这个答案时，我还稍微编辑了这个函数。

注意:根据您在原始问题中输入的预期输出，每个顶点元素只有一个父级({"id":1,"parent":0 <= 在您给出的示例中)，所以如果有是指向同一个 child 的多个 Node ，child 的 parent 属性只会引用第一个 parent 的 id。如果需要，我可以将父属性更改为可以保留多个父 ID 的数组。

function getNodesFrom(graph){
    var cells = graph.getModel().cells;

    var vertices = [], edges = [];
    for (var key in cells) {
        if (cells[key].isVertex()){
            vertices.push(cells[key]);
        } 
        else if (cells[key].isEdge()){
            edges.push(cells[key]);
        }
    }

    var simpleVertices = [], simpleEdges = [];
    var newIndex = 0;
    var newIndexOf = [];
    vertices.forEach(function(vertex){
        simpleVertices.push({id: newIndex, value: vertex.value});
        newIndexOf[vertex.id] = newIndex++;
    });
    edges.forEach(function(edge){
        if (edge.target === null || edge.source === null) return;
        simpleEdges.push({
            parentId: newIndexOf[edge.source.id], 
            childId: newIndexOf[edge.target.id], 
            value: edge.value
        });
    });

    var edgesForParentIndex = [];
    var edgesForChildIndex = [];
    simpleEdges.forEach(function(edge){
        if (edgesForParentIndex[edge.parentId] === undefined){
            edgesForParentIndex[edge.parentId] = [];
        }
        edgesForParentIndex[edge.parentId].push(edge);

        if (edgesForChildIndex[edge.childId] === undefined){
            edgesForChildIndex[edge.childId] = [];
        }
        edgesForChildIndex[edge.childId].push(edge);
    });

    var nodes = [];
    simpleVertices.forEach(function(vertex){
        var node = {};
        node.id = vertex.id;
        if (edgesForChildIndex[node.id] === undefined){
            node.parent = '#';
        } else {
            node.parent = edgesForChildIndex[node.id][0].parentId;
        }
        node.text = (vertex.value === undefined || vertex.value === null) ? '' : vertex.value;
        node.child = [];
        if (edgesForParentIndex[node.id] === undefined){
            node.child.push({cid: null, connectionText: ""});
        } else {
            edgesForParentIndex[node.id].forEach(function(edge){
                var text = (edge.value === undefined || edge.value === null) ? '' : edge.value;
                node.child.push({cid: edge.childId, connectionText: text});
            });
        }
        nodes.push(node);
    });

    return nodes;
}

关于javascript - 如何获取连接的mxgraph之间的父子关系，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56028079/

文章推荐： node.js - 使用 ng e2e 更新 node.js 会导致 'write EPIPE'

文章推荐： android - MultiDexApplication 无法识别

文章推荐： javascript - Node.js/Express 开源示例网站

Java has-a 关系
下面的说法正确吗？ “人最好的 friend 是狗。” public class Mann { private BestFriend dog; //etc } 最佳答案我想说这样
Laravel 关系
我一直在 documentation 中查看 Laravel 4 中的关系我正在尝试解决以下问题。我的数据库中有一个名为“事件”的表。该表具有各种字段，主要包含与其他表相关的 ID。例如，我有一个“
mysql表重新设计思路(关系)
我的表具有如下关系: 我有相互链接的级联下拉框，即当您选择国家/地区时，该国家/地区下的区域将加载到区域下拉列表中。但现在我想将下拉菜单更改为基于 Ajax 的自动完成文本框。我的问题是，我应该有多
MySQL 关系
我正在尝试弄清楚如何构建这个数据库。我之前用过Apple的核心数据就好了，现在我只是在做一个需要MySQL的不同项目。我是 MySQL 的新手，所以请放轻松。 :) 对于这个例子，假设我有三个表，Us
浅谈MongoDB 关系
MongoDB 的关系表示多个文档之间在逻辑上的相互联系。文档间可以通过嵌入和引用来建立联系。 MongoDB 中的关系可以是： 1:1 (1对1) 1: N (1对多)
sql - 范围和分配单元之间有什么区别/关系？
您能解释一下 SQL 中“范围”和“分配单元”之间的区别或关系吗？最佳答案分配单元基本上只是一组页面。它可以很小(一页)或很大(很多页)。它在 sys.allocation_units 中有一个元
基于每个表两列的 PowerPivot 关系
我有一个表 geoLocations，其中包含两列纬度和经度。还有第二个表(让我们将其命名为城市)，其中包含每对唯一的纬度和经度对应的城市。如何使用 PowerPivot 为这种关系建模？创建两个单
android - SQLDelight 关系
我想用 SQLDelight 建模关系，尤其是一对多关系。我有 2 张 table :recipe和 ingredient .为简单起见，它们看起来像这样: CREATE TABLE recipe
Neo4J CSV 关系
我是 Neo4J 新手，我有一个带有源和目标 IP 的简单 CSV。我想在具有相同标签的节点之间创建关系。类似于... source_ip >> ALERTS >> dest_ip，或者相反。 "d
来自另一个类的静态调用的 UML 关系
我正在创建一个类图，但我想知道下面显示的两个类之间是否会有任何关联 - 据我了解，对于关联，ClassA 必须有一个 ClassB 的实例，在这种情况下没有但是，它确实需要知道 ClassB 的一个变
visualization - 为什么OWLViz只显示 "is-a"关系？
是否可以显示其他属性，即“hasTopping”等？如何在 OWLViz 中做到这一点？最佳答案 OWLViz 仅显示类层次结构(断言和推断的类层次结构)。仅使用“is-a”关系进行描述。 OW
java - 如何在对象之间建立链接/关系？
public class MainClass { ArrayList mans = new ArrayList(); // I'm filling in this arraylist,
mysql - “多对二”关系
我想知道“多对二”的关系。 child 可以与两个 parent 中的任何一个联系，但不能同时与两个 parent 联系。有什么办法可以加强这一点吗？我也想防止 child 重复条目。一个真实的例子
grails - 从主应用程序向grails插件域类添加行为(关系)？
我有一个已经创建的Grails插件，旨在支持许多应用程序。该插件具有一个Employee域对象。问题在于，当在主应用程序中使用该应用程序中的域对象时，需要将其引用回Employee对象。因此，我的主应
laravel- Eloquent 关系
我有一个类(class)表、类(class)hasMany部分和部分hasMany讲座以及讲座hasMany评论。如果我有评论 ID 并且想知道其类(class)名称，我应该如何在 LectureCo
Laravel 关系一到两列
我有一个模型团队，包含 ID 和名称。所有可能的团队都会被存储。我的模型游戏有两列 team_1 和 team_2..我需要哪种关系？我已经测试了很多，但它只适用于一列.. 最佳答案也许你可以试
corba - 仆人和对象 - 关系
我读了很多关于 ICE 或 Corba 等技术中使用的仆人和对象的文章。有很多资源我可以读到这样的东西: 一个仆人可以处理多个对象(为了节省资源)。一个对象可以由多个仆人处理(为了可靠性)。有人可
Java 向下转型和 is-A has-A 关系
嗨，我有一个令人沮丧的问题，我在这方面有点生疏。我有两个这样的类(class): class A{ int i; String j ; //Getters and setters} class B
java - 类是否必须位于同一继承树上才能具有 Has-A 关系
class Employee { private String name; void setName(String n) { name = n; } String getNam
java - JPA 关系
如果您有这样的关系: 员工与其主管员工之间存在多对一关系员工与其部门的多对一关系部门与其经理一对一我会在 Employee 实体中写入: @ManyToOne (cascade=CascadeT

IT老高

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何获取连接的mxgraph之间的父子关系