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 を使用して、トランジションなどでこれらのシェイプの幅を操作します。四角形が常にこの順序で、間にスペースがないようにするにはどうすればよいですか? つまり、 of を変更するとwidth、firstofxが即座に更新されます。secondthird

4

2 に答える 2

2

オプション A:ツリーマップを作成し、スティッキー オプションを true: に設定します.sticky(true)。ツリーマップ レイアウトは、DOM/SVG の操作に使用できる x、y、幅、および高さの値を提供します。スティッキー オプションは、スムーズな遷移を処理します。

オプション Bdiv : 要素の代わりになど、プレーンな html 要素を使用し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 に答える