标签: mxgraph
如何验证未连接的边到mxgraph中的单元格
嗨，我面临的问题与validation对未连接 edges到细胞mxgraph
下图将显示您的期望：
问题： 每当我按下验证按钮时，它都未连接 edges，cells必须用红色突出显示。
要查看完整的Codepen，请访问：https ://codepen.io/eabangalore/pen/pmELpL ? editors = 1100
注意：请参阅CODEPEN链接（https://codepen.io/eabangalore/pen/pmELpL?editors=1100），因为以下代码不起作用
完整代码：
<!--
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 …推荐指数
解决办法
查看次数
如何获得连接的mxgraph之间的父子关系
我正在尝试简化连接之间的关系 mxgraph
问题：绘制图形后 ，我正在尝试简化关系。
我正在尝试获取json中已连接节点之间的关系。
注意：解决方案必须适用于每个绘制状态。
这是codepen：
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，如下代码段不起作用。
[
{"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":""}]}
];
请帮助我提前谢谢！！！
推荐指数
解决办法
查看次数
无法通过提供的XML创建MxGraph
这是一个React项目，我正在尝试将XML转换为MxGraph。
PFB：-我有的代码
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import {
mxGraph,
mxRubberband,
mxKeyHandler,
mxClient,
mxUtils,
mxEvent
} from 'mxgraph-js'
// import axios from 'axios'
import parser from 'fast-xml-parser'
import '../../common.css'
import '../../mxgraph.css'
class mxGraphGridAreaEditor extends Component {
constructor (props) {
super(props)
this.state = {
graph: {},
layout: {},
json: '',
dragElt: null,
createVisile: false,
currentNode: null,
currentTask: ''
}
this.LoadGraph = this.LoadGraph.bind(this)
}
componentDidMount () {
const xml = `<mxGraphModel dx='2221' dy='774' grid='1' gridSize='10' guides='1' …推荐指数
解决办法
查看次数
使用mxCellRenderer将draw.io中的XML渲染为图像
我正在尝试以编程方式读取由draw.io生成的XML文件,这是一个在线流程图/图表创建服务.Draw.io是使用mxGraph构建的,最近外部命名为jgraphx(因此是这篇文章中的标记),尽管类名保持不变.
这篇StackOverflow文章展示了如何从文件中读取原始XML数据并将其转换为mxGraph对象,mxGraph Javadocs的这一页描述了如何将mxGraph对象转换为可渲染图像.
然而,对我来说不幸的是,尽管遵循这两个指南,"渲染"的图像始终为空并且IllegalArgumentException抛出一个(因为图像为空).我的代码如下:
String xmlFile = "work/test.xml";
String imageFile = "work/test.png";
mxGraph graph = new mxGraph();
try {
Document doc = mxXmlUtils.parseXml(mxUtils.readFile(xmlFile));
mxCodec codec = new mxCodec(doc);
codec.decode(doc.getDocumentElement(), graph.getModel());
} catch (IOException e) {
e.printStackTrace();
}
RenderedImage image = mxCellRenderer.createBufferedImage(graph, null, 1, \\
Color.WHITE, false, null);
try {
ImageIO.write(image, "png", new File(imageFile));
} catch (IOException e) {
e.printStackTrace();
}
如您所见,此代码应读入XML数据,从该数据创建mxGraph对象,然后将mxGraph对象呈现为当前工作目录中的图像.但是,没有任何反应,也没有创建图像.
有没有人经历过这样的事情？我忽略了什么吗？有没有更好的方法来做我想做的事情？任何帮助,将不胜感激.
推荐指数
解决办法
查看次数
如何在mxgraph中固定拖动步骤
嗨，我正在寻找每个拖动项目的拖动步骤，可以说 200px
下图展示了它：
我已经搜索了很多，但没有找到任何与此相关的解决方案。
问题：虚drag框步骤应设置为200px，换句话说，应跳至200px
全视图Codepen： https ://codepen.io/eabangalore/pen/GaPzJw ? editors = 1000
下面的代码段不起作用，请参见上面的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","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"400","y":"130","width":"100","height":"40","as":"geometry"}}]},{"tagName":"mxCell","attributes":{"id":"3","style":"","vertex":"1","parent":"1"},"children":[{"tagName":"mxGeometry","attributes":{"x":"661","y":"101","width":"100","height":"40","as":"geometry"}}]}]}]};
localStorage.setItem('graphState',JSON.stringify(graphState));
}
function html2json(html){
if(html.nodeType==3){
return …推荐指数
解决办法
查看次数
mxGraph可以将图形导出为PDF吗？
我正在开发一个使用mxGraph的项目,我需要在PDF中为服务流程图导出高分辨率输出.我尝试使用JGraphX,Java Swing客户端重新创建图形并将其导出为PDF,但结果与浏览器显示的结果并不接近.
在客户端的JavaScript中没有PDF导出,mxGraph是否明确支持从JavaScript生成PDF？
推荐指数
解决办法
查看次数
mxgraph中的自动泳道布局
在mxgraph中有泳道示例,但它不是自动的.所以我把graphlayout示例作为基础代替,并做了一些改动:
- 始终使用mxSwimlaneLayout
- 从泳道示例中采用泳道细胞样式
- 创造了两个泳道
- 将它们用作顶点的父级
以下是我创建泳道的方法:
var lane1 = graph.insertVertex(parent, null, 'Lane 1', 0, 0, 1000, 100, 'swimlane');
var lane2 = graph.insertVertex(parent, null, 'Lane 2', 0, 100, 1000, 100, 'swimlane');
// use as parent...
var v1 = graph.insertVertex(lane1, null, 'A', 0, 0, w, h);
并执行布局:
layout.orientation = mxConstants.DIRECTION_WEST;
layout.resizeParent = true;
layout.execute(parent, [lane1, lane2]);
这是测试页面.
现在,这里有两个问题:
- 节点没有放在车道内; 似乎车道根本没有受到尊重.如何使布局将节点放入适当的通道？设置车道作为父母似乎是不够的.
- 我以为WEST会在左边构建图形,但它却是相反的......还有NORTH下降......为什么？
推荐指数
解决办法
查看次数
如何创建线路连接mxGraph
我试图在单击图像图标时创建线路连接，我已经使用wires.html示例尝试了相同的操作。但这是行不通的。我正在使用与mxGraph反应。如何实现这一点。有什么办法可以做到这一点。
mxEvent.addGestureListeners(
img,
mxUtils.bind(this, function(evt) {
mxConnectionHandler.prototype.isStartEvent = function(me) {
console.log("Here we have to start the line connection");
};
})
);
我必须在bind事件中启动线路连接。有没有什么办法解决这一问题。我已经尝试过，但是没有一个在工作。
我真的需要帮助
在图像中，箭头连接（Multiple points are not supported. Used for directly connecting source to target）工作正常。但是需要实现Line Connection（Multiple points are supported. Starting from source we can click any where to create multiple points till the target connection）。
请检查以下URL作为示例
演示网址：http : //jithin.com/javascript/examples/contexticons.html
源代码URL：https : //jsfiddle.net/fs1ox2kt/
在“ 演示URL”中，单击单元格时，将显示4个图标（“删除”，“调整大小”，“移动”，“连接”）。我已将Delete …
推荐指数
解决办法
查看次数
解码 xml 并渲染回画布图单元后，未在 mxgraph 中显示
我能够成功解码图形 xml 模型，但在拖动之前单元格不可见
下面的 GIF显示了我的问题
问题：我想在第一个（现在只显示 div）时间完全加载图形，也不需要拖动
这是我如何解码和呈现 xml
var graphXmlStr = ''//xmldata
var doc = mxUtils.parseXml(graphXmlStr)
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
我正在使用下面的代码作为graph.htmlLabels我需要的代码下面的 html
graph.convertValueToString = function(cell) {
return cell.value;
}
下面是我的完整代码
var graphXmlStr = ''//xmldata
var doc = mxUtils.parseXml(graphXmlStr)
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
请帮助我在此先感谢！！！
推荐指数
解决办法
查看次数
将 draw.io 图渲染为 png
我正在尝试渲染draw.io保存的 (SaveAs->Device) .xml 图表。
使用作为输入示例的保存图：
<mxGraphModel dx="1426" dy="720" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" background="#ffffff" math="0" shadow="0">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="2" value="" style="shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="180" y="200" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="3" value="" style="whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
<mxGeometry x="360" y="180" width="80" height="80" as="geometry"/>
</mxCell>
<mxCell id="4" value="" style="endArrow=classic;html=1;exitX=0.025;exitY=0.638;exitPerimeter=0;" edge="1" parent="1" source="3" target="2">
<mxGeometry width="50" height="50" relative="1" as="geometry">
<mxPoint x="180" y="430" as="sourcePoint"/>
<mxPoint x="230" y="380" as="targetPoint"/>
</mxGeometry>
</mxCell>
</root> …推荐指数
解决办法
查看次数