創建空元素，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

回答

相關問題