如何使用D3.js在SVG中创建流布局？

假设我有一个带有两个形状的SVG容器：

<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>

---

使用D3，我将操纵这些形状的宽度，例如在过渡中。我如何确保矩形始终保持这种顺序，它们之间没有任何空间？也就是说，如果我修改

第一个
的
宽度
，
第二个
和
第三个
的
x
将立即更新。
选项A:创建一个并将粘性选项设置为true:
。粘性（真）
。树状图布局为您提供了x、y、width和heigth值，您可以使用这些值来操作DOM/SVG。“粘滞”选项负责平滑过渡

选项B：使用普通html元素，例如
div
，而不是
svg:rect
元素。如果你真的只是操纵宽度，那应该是更合理的选择：

<style>
    #container div{ float: left; }
</style>
<div id="container">
    <div id="first"  style="width:100px; height:100px; background-color:red;"   ></div>
    <div id="second" style="width:100px; height:100px; background-color:green;" ></div>
    <div id="third"  style="width:100px; height:100px; background-color:blue;"  ></div>
</div>

我做了一个树布局的变化，使之成为一个流布局。您可以查看和查看

data = [ {value: 100}, {value:200}, {value:100} ]
//...
updateData() //changes some values in your data
drawChart()  //draws the whole chart based on the data, e.g., computes the x, y,
             //width, height from the `item.value` (e.g., via d3.layout.treemap)
             //and manipulates/animates the DOM via d3