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我将操纵这些形状的宽度，例如在过渡中。如何确保rects始终保持此顺序，它们之间没有任何空间？也就是说，如果我修改width的{{1}}，first的{{1}}和x将立即更新。

Answer 1

选项A：创建treemap并将粘性选项设置为true：.sticky(true)。树形图布局为您提供了可用于操作DOM / SVG的x，y，width和heigth值。粘性选项负责平滑过渡。

选项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引擎可以处理浮动。 D3不仅限于SVG，它还可以处理普通的html元素（treemap example也使用div元素）。

Btw：在d3中，您不应直接操作DOM。始终考虑基础数据并使更新数据受到驱动，即，在使用树形图时，您可以在源数据中设置数据item.value的{{1}}，例如：

item

Answer 2

我做了一个树形布局的变体，使其成为一个流程布局。您可以看到demo here并查看Gist here。

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

2 个答案: