{"id":909,"date":"2014-03-31T14:45:28","date_gmt":"2014-03-31T19:45:28","guid":{"rendered":"http:\/\/billdwhite.com\/?p=909"},"modified":"2014-03-31T14:45:28","modified_gmt":"2014-03-31T19:45:28","slug":"d3-multiple-flow-container-demo","status":"publish","type":"post","link":"https:\/\/billdwhite.com\/wordpress\/2014\/03\/31\/d3-multiple-flow-container-demo\/","title":{"rendered":"d3 Multiple Flow Container Demo"},"content":{"rendered":"

I received a comment on the Flow Tree Layout post<\/a> asking if it was possible to use that same layout multiple times within a single SVG. The code in that example created an SVG inside of a dom node passed in by the caller, but it is possible to modify that sample to accept any valid SVG container for executing the layout. I created a quick and dirty sample GIST<\/a> showing how it might be done.<\/p>\n

I also put together another d3<\/a> demo showing how the flow layout could be used within multiple containers within the same SVG. This is a much more component-ized implementation which lets you create any number of containers, each with its own layout (all are flow layout in this case). You can resize the containers below to see their individual flow layouts operate. This demo also includes z-ordering and selection logic (drag on the background to do a lasso selection of multiple containers) all implemented using d3. Gist is here<\/a> and bl.ocks version is here<\/a>. Enjoy \ud83d\ude42<\/p>\n

Multiple Flow Containers<\/strong>
\n