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

Question

假设我有一个带有几个形状的 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 操纵这些形状的宽度，例如在过渡中。我如何确保 rect 始终保持此顺序，它们之间没有任何空间？也就是说，如果我修改 first 的 width，second 和 third 的 x > 会即时更新。

Answer 1

选项 A: 创建 treemap并将 sticky 选项设置为 true:.sticky(true)。树形图布局为您提供了 x、y、宽度和高度值，您可以使用这些值来操作 DOM/SVG。 sticky 选项负责平滑过渡。

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

使用纯 html，您可以操纵宽度，浏览器的布局/CSS 引擎可以处理 float 。 D3 不限于 SVG，它也可以处理普通的 html 元素(treemap example 也使用 div 元素)。

顺便说一句:在 d3 中你不应该直接操作 DOM。始终考虑底层数据并使更新数据驱动，即，当使用树形图时，您将在源数据中设置数据 item 的 item.value，例如:

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