How to create a flow layout in SVG?

[tvdien]

Say that I have an SVG container with a couple of shapes:

<svg>
    <g class="container">
        <rect id="first" x="0" y="0" width="100" height="100" fill="red" />
        <rect id="second" x="100" y="0" width="100" height="100" fill="green" />
        <rect id="third" x="200" y="0" width="100" height="100" fill="blue" />
    </g>
</svg>

Using D3 I will manipulate the width of these shapes, for example in transitions. How do I make sure that the rects will always stay in this order, without any space between them? That is, if I modify the widthof first, x of second and third will update instantaneously.





(This is a crosspost from StackOverflow - hope no one is offended by that)

[Ian Johnson]

whats the link to the SO post?

SVG wont provide such a flow layout for you, but you could look at something like the d3 treemap layout function for inspiration (or hack your setup to use it)

Another option depending on what you are trying to do would be to use HTML divs and put svg elements inside each div with 100% width/height. 

--
Ian Johnson - 周彦

http://enja.org

[tvdien]

Here's the link: http://stackoverflow.com/q/13804574/1163893

I really hoped that this was a solved problem...

[Chris Viau]

You could use d3.layout.stack. It will compute the positions for you to keep them stacked. Since you only give an example of stacking in one dimension, treemap is probably overkill.

[tvdien]

But can a stack be put on its side? I need the elements to be next to each other, not on top.

[Jeremy Darling]

Read up on the Stack command it will allow you to do this.  You can also use Object.observe (shim here, https://github.com/jdarling/Object.observe, warning I wrote it) to have each element monitor the other elements changes and update accordingly.

Per the Stack command reference:

tack(layers[, index])

Computes the y-coordinate baseline for each series (layer) in layers, and then propagate that baseline to the other layers. In the simplest case,layers is a two-dimensional array of values. All of the 2nd-dimensional arrays must be the same length. The y and x accessors are used to define the y-thickness of each layer at the given x-position, respectively. Thus, by default the following attributes are required on each value:

• x - the x-position of the value.
• y - the y-thickness of the value.
• y0 - the minimum y-position of the value (baseline).

These attributes can be customized by overriding the accessors and the out function.

 - Jeremy

[Chris Viau]

Also from the doc: "Thus, layers can be stacked vertically, horizontally, or even radially"

[Bill White]

I did a variation of a tree layout to make it into a flow layout.  You can see the demo here and view the Gist here.