如何使用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我將操縱這些形狀的寬度，例如，在過渡。我如何確保rects始終保持這種順序，而且兩者之間沒有任何空間？也就是說，如果我修改width的first,x的second和third會立即更新。

Answer 1

選項A：創建一個treemap並將sticky選項設置爲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.valueitem您的源數據，例如：

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 

Answer 2

我做一棵樹的變化使其成爲流佈局。您可以看到demo here並查看Gist here。