如何使用mxGraph获取SVG元素的ID

How to get ID on SVG Elements using mxGraph

本文关键字：元素 ID SVG 获取 何使用 mxGraph      更新时间：2023-09-26

我的web应用程序使用mxClient.js。我的SVG对象是使用它们的API创建的，API格式如下：

mxGraph.prototype.insertVertex = function(parent,
                                          id,
                                          value,
                                          x,
                                          y,
                                          width,
                                          height,
                                          style,
                                          relative);

然而，当我用ID参数中的字符串初始化对象时，当我在Chrome上检查元素时，它不会出现。这个问题有什么明显的解决办法吗？

到目前为止，我已经尝试使用jQuery和Javascript调用svg，但没有成功。

我的代码库：

function main(container)
        {
            if (!mxClient.isBrowserSupported())
            {
                mxUtils.error('Browser is not supported!', 200, false);
            }
            else
            {
                mxEvent.disableContextMenu(container);
            var graph = new mxGraph(container);
            new mxRubberband(graph);
            var parent = graph.getDefaultParent();
            graph.getModel().beginUpdate();
            try
            {
                var v1 = graph.insertVertex(parent, "_IWID_1021", 'asdf', 31, 240, 100, 30),
                    v2 = graph.insertVertex(parent, "_IWID_2349", 'Oasdf', 160, 320, 100, 30),
                    v3 = graph.insertVertex(parent, "_IWID_3452", 'asdf', 160, 160, 100, 30),
                    v4 = graph.insertVertex(parent, "_IWID_4561", 'asdfasdf', 320, 320, 100, 30),
                    v5 = graph.insertVertex(parent, "_IWID_5670", 'asdff', 320, 160, 100, 30),
                    v6 = graph.insertVertex(parent, "_IWID_6780", 'qwerqwer', 448, 240, 100, 30),
                    v7 = graph.insertVertex(parent, "_IWID_3456", 'zxcvxzcv', 597, 240, 100, 30),
                    v8 = graph.insertVertex(parent, "_IWID_3498", 'asdfasdf', 714.6, 240, 100, 30),
                    v9 = graph.insertVertex(parent, "_IWID_1643", 'asdfasdf', 822, 240, 100, 30),
                    v10 = graph.insertVertex(parent, "_IWID_5731", 'asdfasdf', 993, 240, 100, 30),
                    v11 = graph.insertVertex(parent, "_IWID_0942", 'asdfasdf', 1113, 240, 100, 30),
                    v12 = graph.insertVertex(parent, "_IWID_2875", 'asdfasdf', 1221, 240, 100, 30),
                    v13 = graph.insertVertex(parent, "_IWID_9397", 'asdfasdfasd', 1333, 240, 100, 30),
                    v14 = graph.insertVertex(parent, "_IWID_111", 'asdfasdf', 1486, 240, 100, 30);
                var c1 = graph.insertEdge(parent, null, '', v1, v2),
                    c2 = graph.insertEdge(parent, null, '', v1, v3),
                    c3 = graph.insertEdge(parent, null, '', v2, v4),
                    c4 = graph.insertEdge(parent, null, '', v3, v5),
                    c5 = graph.insertEdge(parent, null, '', v4, v6),
                    c6 = graph.insertEdge(parent, null, '', v5, v6),
                    c7 = graph.insertEdge(parent, null, '', v6, v7),
                    c8 = graph.insertEdge(parent, null, '', v7, v8),
                    c9 = graph.insertEdge(parent, null, '', v8, v9),
                    c10 = graph.insertEdge(parent, null, '', v9, v10),
                    c11 = graph.insertEdge(parent, null, '', v10, v11),
                    c12 = graph.insertEdge(parent, null, '', v11, v12),
                    c13 = graph.insertEdge(parent, null, '', v12, v13),
                    c14 = graph.insertEdge(parent, null, '', v13, v14);
            }
            finally
            {
                graph.getModel().endUpdate();
            }
        }
    };

您所看到的是正确的。

几周来，我一直在努力解决这个问题。

生成的SVG中没有一个包含我能看到的任何基于HTML的合理ID属性，这意味着没有生成的ID可以进行jQuery或任何其他操作。

我们最终要做的是，保留我们创建的顶点数组，然后我们可以在以后引用它们。

在我们的案例中，我们想更改单元格对象中的图像，因此我们在一个数组中保留了一个引用，并在MxGraph中收到点击事件时进行匹配，然后使用它们的API更改图像。

我不知道这是否有任何帮助，但是。。。

正如我刚才在另一个类似的问题中指出的，在MxGraph事件处理程序中，如果您执行以下

var mouseEvent = event.getProperty('event');
var selectedCell = event.getProperty('cell');

Where事件作为参数传递到事件处理程序中。

然后，您可以使用查看点击的元素的HTML

selectedCell.currentTarget.innerHTML

一旦有了内部HTML，理论上就可以使用常规的JS/HTML代码来添加ID的属性或任何其他需要的内容。

但是，如果所有的after都是一个ID，那么使用"insertVertex"创建单元格时提供的ID在selectedCell对象中作为字符串可用。

相关文章：