Question

我有包含g.cell元素的g.row元素，每个元素都包含一个rect元素。我的嵌套数据绑定到g.row，然后绑定到g.cell。 rect元素访问绑定到g.cell的数据。

此时我的输入和退出选择添加并删除g.cell。让它们添加和删除rect元素会更有效，因为g.cell有绑定到它的事件我需要重新分配。但这可能吗？我看不出如何让它发挥作用。

我已成功运行cell.exit().selectAll("rect").remove();，效果很好。但cell.enter().selectAll("g.cell").append("rect");会抛出错误（“[此代码]不是函数”）。虽然cell.enter().append("rect")没有追加矩形。

g.cell上的当前代码：

  var cell = row.selectAll("g.cell")
    .data(function(d){
      return d.value.filter(function(p){
        if (p[1]=='') {
          return horizNodesCopy.indexOf(p[0])!=-1;
        } else {
          return horizNodesCopy.indexOf(p[0]+' -- '+p[1])!=-1;
        }
      });
    });


  var cell2 = cell.enter().append("g")
      .attr("class",function(d,i,j){ return "cell cell_"+i; })
      .attr('transform',function(d,i,j){
          if (d[1]=='') {
            return 'translate('+ x(d[0]) +',0)';
          } else {
            return 'translate('+ x(d[0]+' -- '+d[1]) +',0)';
          }

    });

    addRectangles(cell2,colorScale);

    cell.exit().remove();

这感觉就像是显而易见的事：/

D3 - 使用enter（）和exit（）选择来更新子元素

0 个答案: