D3の既存のアイテムリストにリストアイテムを追加するにはどうすればよいですか？

Question

初心者はこちらです。私はliを既存のリストに追加しようとしていますが、期待される結果は得られません。私はリストの最後に追加したいと思います。

... 
    <ul id="items"> 
     <li class="item">One</li> 
     <li class="item">Two</li> 
     <li class="item">Three</li> 
     <li class="item">Four</li> 
     <li class="item">Five</li> 
    </ul> 
    ... 

コンソールで

d3.selectAll('li') 
    .data([1,2,3,4,5,6]) 
    .enter() 
    .append('li') 
    .text('a text') 
    .classed('item',true); 

これはbody

... 
</body> 
<li class="item">a text</li> 
... 

アップデートの最後にliを追加します。

実験のビットを行なったし、作業1を得ました。しかし、なぜ以前のものがうまくいかなかったのかを理解する必要がありますか？

d3.select('#items') 
    .selectAll('.item') 
    .data([1,2,3,4,5,6]) 
    .enter() 
    .append('li') 
    .text('a text') 
    .classed('item',true); 

Answer 1

最初の試行では、追加する要素がD3に提供されていないため、ドキュメントの末尾に追加されました。 ul#itemsを選択して追加すると、dataアレイをliの子ul#itemsにバインドしたときに、さらに1つ追加することに成功しました。liあなたはliのアイテムしか持っておらず、dataの配列には6アイテムがありました。liを追加したenter()メソッドが呼び出されました。このコードを試してみて、何が起こっているかを考えてみます。

var data = [1,2,3,4,5]; 

function updateData(data) { 
    var item = d3.select('#items') 
    .selectAll('li') 
    .data(data); 

// Enter 
    item 
    .enter() 
    .append('li') 
    .attr('class', 'item') 
    .text(function(d) { return 'List item ' + d }); 

// Update 
    item 
    .text(function(d) { return 'Updated value to' + d }); 

// Exit 
    item.exit().remove(); 
} 

updateData(data); 

setTimeout(function() { 
    var newData = data.map(function(v) { 
    return v * 2; 
    }); 

    updateData(newData) 
}, 3000); 

setTimeout(function() { 
    var newData = data.concat(data); 

    updateData(newData) 
}, 6000); 

setTimeout(function() { 

    updateData(data) 
}, 9000); 

我々はul#itemsを選択し、それにdataをバインドすることができます。 updateDataが呼び出されると、D3はデータ要素よりもdom要素が多いかどうかを評価し、それに応じてenter()またはexit()を呼び出すかどうかを選択します。また、テキストを新しい値に変更するための更新手順もあります。うまくいけば、これはあなたが経験しているものの性質を説明してくれるでしょう。 D3の入力、更新、終了についての良い読書をしてください。いったん理解すれば、本当に複雑なものをたくさん簡単にやることができます。