Our group developed a stream-oriented NetFlow query language, called NFQL.
Given that it can have multiple filtering/grouping stages and a number of branches, defining a query in a text file can become cumbersome. Therefore, we would like to develop a browser-based interface for defining these queries.
A user is initially presented a layout with a single branch. An interface would feature an "Add branch" button, which adds more branches and rearranges the layout to accommodate all of them (similar to the layout shown in this figure). After that a user can click on individual stages (depicted as rectangles), which would open a dialog box where a user can specify query rules for that particular stage.
My question is: how can branches be added dynamically? Would using d3.js's transitions suffice to do that or is there a better way of doing that?