已创建空元素，d3.js

我的代码中的转换不同步，因此元素彼此重叠写入，而不是先删除元素，然后添加新元素。我认为这样做的原因可能是因为很多空的g元素正在被创建而没有被删除。但是我不确定，我的代码可以在这里找到：

我尝试了另一种方法来实现fiddle上显示的内容，使用data.filter来避免创建空元素，但它不提供任何输出：

var data = [ [[0,0],[0,1],[0,2],[0,1]], [[0,0],[0,0],[0,1],[0,1]] ];
svg.selectAll("text.data")                
  .data(data.filter(function(d){return d[0][0];}))//changing this to d[0] outputs the whole array 
  .enter()
  .append("text")
  .classed("data",true)
  .text( function(d,i) {
       return d; 
   })
  .attr("x", function(d,i) { return (i * 50) + 200; })
  .attr("y", function(d,i) { return (i * 50) + 150; })
  .attr("text-anchor", "middle")
  .attr("fill", "black"); 

svg.selectAll(".data")
  .transition()
  .delay(function(d, i, j) {       
          return i * 1000 + 1000; 
  })
  .remove();   

是否有更好的方法来不断添加和删除元素，以避免创建空元素，或者我使用嵌套选择（JSFIDLE上的代码）的方式有问题

---

多谢各位

您的代码与JSFIDLE不一样的原因是您的

.filter（）

没有做您认为它做的事情。要访问单个元素，只需索引到数组中，而不是过滤它

使用您的代码修改示例。我所做的就是改变

.data(data.filter(function(d){return d[0][0];}))

到

---

你想做什么？JSFIDLE似乎工作得很好。@Larskotoff也创建了许多空的g元素：我知道这是由于嵌套选择，所以我试图找到一种显示和删除元素的替代方法，因为在我的可视化中（不是上面的示例），我的转换不同步，我想这可能是因为删除了所有的g元素。我不确定，所以我想我会找到另一种方法。使用data.filter不是一种合适的方式吗？我似乎找不到任何其他原因来解释转换的顺序是错误的：/如果您只想显示数据的一小部分，那么您应该使用它来驱动可视化，而不是整个数据。JSFIDLE中的转换似乎完全按照您指定的顺序进行。我认为这可能是问题所在，每次只显示数据的一个子集时，我都在使用整个数据。这可能会导致删除元素的延迟，因为它必须删除所有元素，也包括空元素。谢谢你，拉尔斯！我还将更改代码：D，只是想知道我使用data.filter的方式有什么问题？我试图获得与JSFIDLE上显示的相同的输出。

.data(data[0][0])