2

私の Web アプリは mxClient.js を使用しています。私の SVG オブジェクトは、次の形式の 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();
            }
        }
    };
4

1 に答える 1

2

あなたの見方は正しいです。

ここ数週間、これで作業しようとして、レンガの壁に頭をぶつけてきました。

生成された SVG には、私が見ることができる実用的な HTML ベースの ID 属性は含まれていません。つまり、jQuery やその他の操作を実行するための生成された ID はありません。

最終的に行ったことは、作成した頂点の配列を保持し、後でそれらを参照できるようにすることでした。

私たちの場合、セル オブジェクトの画像を変更したかったので、配列に参照を保持し、MxGraph でクリック イベントを受け取ったときにそれを照合し、API を使用して画像を変更しました。

参考になるかわかりませんが…

別の同様の質問で指摘したように、MxGraph イベント ハンドラーで次のようにすると、

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

イベントがパラメーターとしてイベント ハンドラーに渡される場所。

次に、クリックした要素の HTML を取得できます。

selectedCell.currentTarget.innerHTML

内部 HTML を取得したら、理論的には通常の JS/HTML コードを使用して、ID の属性や必要なものを追加できます。

ただし、後がすべて ID の場合、「insertVertex」を使用してセルを作成したときに指定した ID は、selectedCell オブジェクトで文字列として使用できます。

于 2016-02-04T16:49:52.723 に答える