CODEWITHSUNDEEP
javascriptsvgmxgraph
Xenyal
Xenyal

Reputation: 2223

How to get ID on SVG Elements using mxGraph

My web app uses mxClient.js. My SVG objects are created using their API which comes in the following form:

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

However, when I initialize my objects with a string in the ID parameter, it does not appear when I inspect element on Chrome. Is there any obvious workaround for this issue?

Thus far, I've tried to call the svg using jQuery and Javascript but to no avail.

My code base: 

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();
            }
        }
    };

Upvotes: 2

Views: 1624

Answers (1)

shawty
shawty

Reputation: 5829

What your seeing is correct.

I've been banging my head off a brick wall trying to work with this for a couple of weeks now.

NONE of the generated SVG includes any sensible HTML based ID attributes that I can see, which means there are no generated ID's to do jQuery or any other operations against.

What we ended up doing, was to keep an array of the vertexes we created, then we could refer back to them later.

In our case we wanted to change the images in our cell objects, so we kept a reference in an array and matched that up when we received a click event in MxGraph, and then changed the images using their API.

I don't know if it's any help however, BUT...

As I've just pointed out in another similar question, in your MxGraph event handler, if you do the following

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

Where event is passed into the event handler as a parameter.

You can then get at the HTML of the element clicked on by using

selectedCell.currentTarget.innerHTML

once you have the inner HTML, you could then in theory use regular JS/HTML code to add ID's attributes or anything else you need.

If however all your after is an ID, then the ID you provided when you created the cell using "insertVertex" is available in the selectedCell object as a string.

Upvotes: 2

Related Questions