Javascript/SVGとのインターフェースを設計するためのコーディング手法に関するフィードバックを探しています。最近AdobeFlexの専門分野を放棄したため、これらの言語は初めてです。
このソフトウェアは、送信元信号を宛先信号にマッピングするための汎用インターフェイスになります。接続はグリッドで表され、行/列は送信元/宛先信号を表します。
XXXX | 目的地A XOXX | 目的地B XXXX | 目的地C XXXX | 目的地D --------- 1 2 3 4
この-beautiful-ダイアグラムでは、「0」はソース「信号2」が「宛先B」にマップされていることを表します。
データ（接続オブジェクト）をビュー（SVG要素）にバインドすることに関心があります。これが私がそれをした方法です：
データは2D配列に格納されます：connections [nSources] [mDestinations]
ビューでは、接続の2D配列内の各アイテムについて、IDが「celln、m」（「n、m」はその行/列のインデックスに対応）のSVG要素を作成し、それをDOMに追加します。これは、document.getElementById（…）を使用してSVG要素にアクセスする、または「evt.target.id」文字列を解析してユーザーがクリックした行/列を見つけるための非常に簡単な方法であることがわかりました。
最初の実装はうまく機能します。しかし、インターフェイスは動的データの処理をサポートする必要があるため、心配しています...ソース/宛先信号はその場で追加または削除されます。行と列は、ユーザーが再配置できます。また、信号を拡張可能ノードと折りたたみ可能ノードにグループ化することをサポートする必要があります。
簡単な例：新しい行がインデックス0に追加された場合、すべてのSVG要素のIDを更新して、その行を1つ増やす必要があります。
私の具体的な質問：DOM要素のIDをこれほど操作しても大丈夫ですか（グッドプラクティス、安全、信頼性）??
コードのサンプル（SVG要素のIDを操作する関数）を確認するには、ここを参照してください： サンプル
たとえば、200x200のグリッドで、インデックス0に行を追加すると、40,000個のSVG要素のIDが変更されるのは恐ろしいことです。誰かがそれで問題を見ますか？