3

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

4

2 回答 2

2

我做了一个树布局的变体，使其成为流布局。您可以在此处查看演示并在此处查看要点。

于 2013-10-15T18:39:07.233 回答
2

选项 A：创建树状图并将粘性选项设置为 true .sticky(true)：。树形图布局为您提供 x、y、宽度和高度值，您可以使用它们来操作 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>

使用纯 html，您可以操纵宽度，浏览器的布局/CSS 引擎处理浮动。D3 不限于 SVG，它还可以处理普通的 html 元素（树形图示例也使用div元素）。

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

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
于 2012-12-10T18:15:45.370 回答