Question

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.

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:

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

In this -beautiful- diagram, the “0” represents source ‘signal 2’ is mapped to ‘destination B’.

I am concerned with binding the data (connection objects) to the view (SVG elements). Here’s how I did it:

the data is stored in a 2D array: connections[nSources][mDestinations]

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.

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.

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.

My specific question: is it ok (good practice, safe, and reliable) to be manipulating the IDs of DOM elements this much??

To see a sample of code (the functions that manipulate the IDs of the SVG elements), please see here: sample

It just seems scary that in a grid of 200×200 (for example), adding a row at index 0 means changing the IDs of 40,000 SVG elements. Does anyone see a problem with that?

Answer 1

Anyway, you will use DOM manipulations to achieve your goals. Suggestion: use MVC pattern. Whenever user adds/deletes row, or rearrange them you modify not DOM, but the model. Then you call some listener/callback that redraws SVG. Personally I would detach the whole table (I would keep all rows in one parent <g>, for example) from DOM (with remove operation, or smth like it. What library do you use?). Then, I’ll recreate it in memory, and only after that I’ll attach (appendChild to that group) it back. This approach seems to be simple and fast enough.