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

我的web應用程序使用mxClient.js。如何使用mxGraph獲取SVG元素的ID

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

然而，當我初始化我的對象與ID參數字符串，它不會，當我在Chrome檢查元素出現：使用他們的API，它自帶以下表格創建我的SVG對象。這個問題有沒有明顯的解決方法？

到目前爲止，我試圖使用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(); 
      } 
     } 
    };

來源

2014-09-05 Xenyal

函數的_body_在哪裏？ – undefined 2014-09-05 20:29:07

ID用於mxGraphModel.getCell。在調用endUpdate之後，您可以使用graph.view.getState（cell）.shape.node（標籤的.text.node）獲取元素的SVG節點。 – user1084282 2014-09-06 13:37:04

謝謝，我會盡快嘗試並更新問題，如果它工作。 – Xenyal 2014-09-06 20:11:02

你看到的是什麼正確。

我一直在試圖用這個工作幾個星期的磚牆撞我的頭。

生成的SVG中沒有NONE包含任何明智的基於HTML的ID屬性，我可以看到，這意味着沒有生成的ID可用於執行jQuery或任何其他操作。

我們最終做的是保留一個我們創建的頂點數組，然後我們可以稍後再引用它們。

在我們的案例中，我們希望更改單元格對象中的圖像，所以我們在數組中保留了一個引用，並在MxGraph中接收到單擊事件時將其匹配，然後使用它們的API更改圖像。

我不知道這是否是任何幫助，但是，但是...

正如我剛纔在另一個類似的提問時指出，在MxGraph事件處理程序，如果你做以下

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

其中事件作爲參數傳遞給事件處理程序。

然後你可以在元素的HTML點擊使用

selectedCell.currentTarget.innerHTML

一旦你的內部HTML，然後你可以在理論上用常規的JS/HTML代碼中加入ID的屬性或其他任何你需要。

但是，如果您的所有after是一個ID，那麼您使用「insertVertex」創建單元格時提供的ID在selectedCell對象中作爲字符串可用。

來源

2016-02-04 16:49:52 shawty

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

回答

相關問題