假设我有一个有几种形状的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
将立即更新。
答案 0 :(得分:2)
选项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
答案 1 :(得分:2)