Question

我的代码中的转换不同步，因此元素彼此重叠，而不是先删除元素，然后添加新元素。我认为造成这种情况的原因可能是因为正在创建许多空的g元素而不是删除它们。我不确定，我的代码可以在这里找到：http://jsfiddle.net/ice1/hNwUg/1/

我尝试了另一种方法来做小提琴上显示的内容，使用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();

有没有更好的方法来连续添加和删除元素，以避免创建空元素，或者我使用嵌套选择（jsfiddle上的代码）的方式有问题吗？

谢谢。

Answer 1

您的代码与jsfiddle不同的原因是您的.filter()没有按照您的想法执行操作。要访问单个元素，您只需要索引数组，而不是过滤它。

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

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

到

.data(data[0][0])

创建空元素，d3.js

1 个答案: