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());
}

我一直坚持到这里。 console.log()表示整个新数据是enter()，none是exit()!

输入数据呈现

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

没有根对象字段，所以这就是我在 treemapData 对象中重新映射数据的原因。

T 感谢您至少花时间阅读到目前为止 post，希望您有任何建议。

UDP。你可以在这里查看我的代码的工作版本：https://jsfiddle.net/qtbfm08k/

Answer 1

以下作品：

移除d3.selectAll('.cell').remove();
使用下面的代码

参见fiddle：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; })
   ...

d3 treemap 图形无法正确识别 enter() 和 exit() 数据

d3 treemap graphic don't recognize enter() and exit() data correctly

d3.js

treemap