title: how to bind SVG elements to data?
body: <p>I'm looking for feedback on my coding technique for designing an interface with Javascript/SVG. I am new to these languages, as I have recently abandoned my specialization in Adobe Flex. </p>
  
  <p>The software will be a generic interface to map source signals to destination signals. Connections are represented by a grid, with rows/columns representing source/destination signals:</p>
  
  <pre>
  X X X X | destination A
  X O X X | destination B
  X X X X | destination C
  X X X X | destination D
  ---------
  1 2 3 4
  </pre>
  
  <p>In this -beautiful- diagram, the "0" represents source 'signal 2' is mapped to 'destination B'.</p>
  
  <p>I am concerned with binding the data (connection objects) to the view (SVG elements). Here's how I did it: </p>
  
  <p>the data is stored in a 2D array: connections[nSources][mDestinations]</p>
  
  <p>In the view, for each item in the 2D array of connections, I create an SVG element with its ID as "celln,m" ("n,m" corresponds to its row/col indices) and add it to the DOM. I found this to be a very simple way to access any SVG element, by using document.getElementById(…), or to find the row/col a user clicked on by parsing the 'evt.target.id' string.</p>
  
  <p>First implementation works well. But I am concerned because the interface needs to support dealing with dynamic data... sources/destination signals will be added or removed on the fly. Rows and columns can be re-arranged by the user. And it will need to support grouping signals into expandable and collapsable nodes.</p>
  
  <p>A simple example: if a new row is added at index 0, I would need to update the IDs of every SVG element to increase its row by 1.</p>
  
  <p>My specific question: is it ok (good practice, safe, and reliable) to be manipulating the IDs of DOM elements this much??</p>
  
  <p>To see a sample of code (the functions that manipulate the IDs of the SVG elements), please see here:  <a href="http://six39.com/mcgill/libmappergui/sample.txt" rel="nofollow">sample</a></p>
  
  <p>It just seems scary that in a grid of 200x200 (for example), adding a row at index 0 means changing the IDs of 40,000 SVG elements. Does anyone see a problem with that?</p>