我能够成功解码图形 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 使用以下代码下面的代码我需要 graph.convertValueToString = function(cell) {
return cell.value;
}
<html>
<head>
<title>Toolbar example for mxGraph</title>
<style>
#graph-wrapper {
background: #333;
width: 100%;
height: 528px;
}
</style>
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>
<script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
</head>
<body onload="initCanvas()">
<h4>find div text and drag it , as you drag it will become visible</h4>
<div id="graph-wrapper">
</div>
<script>
var graph;
function initCanvas() {
//This function is called onload of body itself and it will make the mxgraph canvas
graph = new mxGraph(document.getElementById('graph-wrapper'));
graph.htmlLabels = true;
graph.cellsEditable = false;
graph.model.beginUpdate();
var graphXmlStr = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><div xmlns="http://www.w3.org/1999/xhtml" id="2" style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
 Pipe
 <mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" parent="1"><mxGeometry x="150" y="50" width="100" height="100" as="geometry"/></mxCell></div></root></mxGraphModel>`;
var doc = mxUtils.parseXml(graphXmlStr);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
graph.model.endUpdate();
// render as HTML node always. You probably won't want that in real world though
graph.convertValueToString = function(cell) {
return cell.value;
}
}
</script>
</body>
</html>请帮助我提前谢谢!!!
最佳答案
我发现你必须调用graph.refresh(); .
<html>
<head>
<title>Toolbar example for mxGraph</title>
<style>
#graph-wrapper {
background: #333;
width: 100%;
height: 528px;
}
</style>
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>
<script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
</head>
<body onload="initCanvas()">
<h4>find div text and drag it , as you drag it will become visible</h4>
<div id="graph-wrapper">
</div>
<script>
var graph;
function initCanvas() {
//This function is called onload of body itself and it will make the mxgraph canvas
debugger
graph = new mxGraph(document.getElementById('graph-wrapper'));
graph.htmlLabels = true;
graph.cellsEditable = false;
graph.model.beginUpdate();
var graphXmlStr = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><div xmlns="http://www.w3.org/1999/xhtml" id="2" style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
 Pipe
 <mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" parent="1"><mxGeometry x="150" y="50" width="100" height="100" as="geometry"/></mxCell></div></root></mxGraphModel>`;
var doc = mxUtils.parseXml(graphXmlStr);
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, graph.getModel());
graph.model.endUpdate();
//graph.graphModelChanged([])
// render as HTML node always. You probably won't want that in real world though
graph.convertValueToString = function(cell) {
return cell.value;
}
graph.refresh();
}
</script>
</body>
</html>关于javascript - 解码 xml 并渲染回 Canvas 图形单元格后未在 mxgraph 中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68033498/