How to auto update sub elements datum binding in D3
<p>All:</p>

<p>I am pretty new to D3 data binding, what I am trying to understand is how D3 controls the datum update, for example, I want to build a row of buttons, the structure is span wrap a button:</p>

<pre><code>&lt;span&gt;&lt;button&gt;1&lt;/button&gt;&lt;/span&gt;
&lt;span&gt;&lt;button&gt;2&lt;/button&gt;&lt;/span&gt;
&lt;span&gt;&lt;button&gt;3&lt;/button&gt;&lt;/span&gt;
</code></pre>

<p>And code is like:</p>

<pre><code>var ds1 = [1,2,3,4]
var ds2 = [11,22,33,44]

var cells = d3.select("#content")
    .selectAll("span button.cell")
    .data(ds1)
cells.enter()
    .append("span")
    .append("button")
    .classed("cell", true)
    .text(function(d, i){
        return d;
    })
</code></pre>

<p>But when I try to update ds2, with update function below, each d is previous datum, like 1,2,3,4. </p>

<pre><code>function update(data){
    cells.data(data)
        .selectAll("button.cell")
        .text(function(d, i){
            return d;
        })
}
</code></pre>

<p><strong>I wonder how can I make the new data bind to those buttons?</strong></p>