创建空元素，d3.js

我的代码中的转换不同步，所以元素互相重叠，而不是首先删除元素，然后添加新元素。我认为这可能是因为许多空的g元素正在创建并且未被删除。我不知道，虽然，我的代码可以在这里找到：http://jsfiddle.net/ice1/hNwUg/1/创建空元素，d3.js

我试图用另一种方式做什么显示在小提琴年代，使用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上的代码）？

谢谢。

来源

2014-04-05 user3441959

那你想干什么？ jsfiddle似乎工作得很好。 –

@LarsKottoff许多空g元素也被创建：https：//docs.google.com/file/d/0B9CuJXctgOrqLVk2LWV3RWtIeDA/edit？pli = 1我知道它是由于嵌套选择，所以我试图找到一种替代方法以显示和删除元素，因为在我的可视化（不是上面的例子），我的转换不同步，我认为这可能是由于删除所有的g元素。我不确定，尽管如此，我会找到另一种方式。使用data.filter不是一个合适的方式？ – user3441959

我似乎无法找到任何其他原因，为什么转换发生在错误的顺序：/ – user3441959

你的代码与jsfiddle不一样的原因是你的.filter()没有做你认为它的工作。要访问一个单独的元素，你只需要索引到数组中，而不是过滤它。

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

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

到

.data(data[0][0])

来源

2014-04-05 21:07:00

创建空元素，d3.js

回答

相关问题