d3 treemapグラフィックがenter（）とexit（）データを正しく認識しない

Question

私は素敵なd3.jsライブラリを使用して動的なツリーマップグラフィックを作成しようとしています。 は、ここに私のコード

element = d3.select(element[0]); 
var margin = 10, 
    width = parseInt(element.style('width')) - margin * 2, 
    height = parseInt(element.style('height')) - margin * 2; 

var color = d3.scale.category10(); 

var canvas = d3.select('.treemap').append('svg') 
    .attr('width', width) 
    .attr('height', height) 
    .attr('transform', 'translate(-.5,-.5)') 
    .style('margin', margin); 

var treemap = d3.layout.treemap() 
    .size([width, height]) 
    .value(function(d) { return d.value; }) 
    .sticky(false); 

function redraw(data) { 
    d3.selectAll('.cell').remove(); 
    var treemapData = {}; 
    treemapData.children = data.map(function(d) { 
     return { 
     name: d.name, 
     value: d.value 
     }; 
    }); 

    var leaves = treemap(treemapData); 

    var cells = canvas.selectAll("g") 
    .data(leaves); 

    var cellsEnter = cells.enter() 
    .append('rect') 
    .attr('class', 'cell') 
    .attr('x', function(d) { return d.x; }) 
    .attr('y', function(d) { return d.y; }) 
    .attr('width', function(d) { return d.dx; }) 
    .attr('height', function(d) { return d.dy; }) 
    .attr('fill', function(d) { return d.children ? null : color(d.name); }) 
    .attr('stroke', "#fff") 
    .style('fill-opacity', 0); 

console.log(cells.exit(), cells.enter()); 
} 

そして、ここで私がstuckedているのサンプルです。 console.log（）は、新しいデータ全体がenter（）であり、exit（）でないことを示しています！

入力データは、ルートオブジェクトフィールドなし

[{value: 590, name:"A1"}, {...}, ...] 

のように提示し、私はtreemapDataオブジェクト内のデータを再マッピング理由です。

Тあなたは少なくともこの投稿を読んであなたの時間を過ごしたことをありがとうございました。何か提案がありましたら幸いです。

UDP。 https://jsfiddle.net/qtbfm08k/

Answer 1

次作品：あなたはここに私のコードの作業バージョンを確認することができます

• d3.selectAll('.cell').remove();

フィドルを参照してください以下のコードを使用削除：https://jsfiddle.net/b6meLedn/4/

var cells = canvas.selectAll('.cell') //select all cells 
    .data(leaves);  //map the data 

    cells.exit().remove(); //remove old extra elements 
    cells.enter() 
    .append('rect')  //create new rectangles as necessary 
    .attr('class', 'cell') 

    cells     //take all cells (old cells that have new data+extra new cells) 
    .attr('x', function(d) { return d.x; }) 
    ... 

を