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（），没有一个是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; })
   ...

d3 treemap图形无法正确识别enter（）和exit（）数据

1 个答案: