退出不能正常工作

你好，我很新的D3和我有退出功能的問題退出不能正常工作

我想做一些列表和酒吧沒有使用SVG和一切工作像一個魅力。

我選擇div，然後附加並輸入我的數據以填充variuos div。

var content = d3.select("#graph").selectAll("div") 
     .data(bandMates) 
     .enter() 
     .append("div") 
     .classed("member",true) //Div contenedor 

     content 
      .append("div") 
      .text(function(d) { return d.name; }); 

     content 
      .append("div") 
      .style("height", "40px") 
      .style("width", "0px") 
      .style("background-color", "#ff9999") 
      .transition() 
      .duration(1000) 
      .style("width", function (d){ return d.songs + "px";}); 

     content 
      .append("div") 
      .text(function(d) { return "wrote " + d.songs + " songs!"; });

在過程結束時，我有，因爲我希望能夠以更新的另一個功能歌曲的編號，然後再打電話去draw（）函數的content.exit().remove();功能。

Firebug的控制檯拋出我這個錯誤

content.exit is not a function

我缺少的東西？我去了Bostock的教程，一切似乎都沒問題。

我已經做了的jsfiddle要看看我的代碼：

http://jsfiddle.net/9HTUM/

感謝您的閱讀！

來源

2013-08-05 White Cat

這裏有一個更新的擺弄着三個轉變：http://jsfiddle.net/URpfB/

1）您最初的全選選擇需要你的代碼運行一次後是因爲有在頁面中有許多後代的div更加具體。您需要區分最頂級的成員divs和其他做selectAll('div.member')

2）您需要數據鍵功能，因此d3有比數據長度/位置更多，以確定何時添加新數據或舊數據將被刪除。在你的例子中，這將使每個div.member與一個成員名稱相關聯：data(bandMates, function(d){return d.name;})

3）正如Snoozer指出的那樣，將選擇分配給變量時，您需要更加精確。你不能從enter（）選擇中退出（）。

來源

2013-08-05 21:49:09

愛皮特另外=）非常感謝你的jsFiddle。它真的提高了Snoozer的答案。輸入（）和退出（）仍然是我d3中的鞋子裏的一塊石頭。 –

您已經定義內容：

var content = d3.select("#graph").selectAll("div") 
    .data(bandMates) 
    .enter() 
    .append("div") 
    .classed("member",true) //Div contenedor

所以當你做content.exit()，它就像試圖做d3.select("#graph").selectAll("div").data(bandMates).enter()..exit()

你打電話你已輸入選擇退出。如果你定義的內容，而不是爲：

var content = d3.select("#graph").selectAll("div") 
    .data(bandMates);

，然後在你在你的答案代碼共享3號線做content.enter()....，這個錯誤應該消失。

Enter()和exit()是選擇數據的功能，所以一旦你叫enter()你不能再打exit()並將它是有意義的。 exit()必須在相同的數據上。

來源

2013-08-05 21:36:41

因此進入和退出絕不會在這個例子中特定或作爲一般規則，相同的變量工作？ –

'enter（）'和'exit（）'將在同一個變量上工作。你在原始代碼中做了什麼實質上是'mydata.enter（）。exit（）'。你不能一個接一個。你需要var x = d3.select（「stuff」）.data（mydata）'，然後分別執行'x.enter（）'和'x.exit（）'。上面的Ray的答案在建議好的數據更新做法方面做得好得多 –

哦，我現在看到了。非常感謝您的回覆。我正在處理我的代碼atm，解決了這個問題:) –

樹只可能的原因...

這與OP的問題沒有關係，但我在研究它時發現了這個問題，因此將其添加到下一個路人。

在我的情況下，沒有發生collapse/expand上的d3.layout.tree的清理，因爲我忘記了在節點上設置「節點」類。看起來好像d3樹需要設置節點類屬性。

沒有工作

<g transform="translate(20,20)"> 
    <circle style="fill: rgb(198, 219, 239);" r="8"></circle> 
    <text style="fill-opacity: 1;" dx="15" dy="4" id="txt_SELF_SERVICE" class="text">Self Service</text> 
</g>

工作

<g transform="translate(20,20)" class="node "> 
    <circle style="fill: rgb(198, 219, 239);" r="8"></circle> 
    <text style="fill-opacity: 1;" dx="15" dy="4" id="txt_SELF_SERVICE" class="text">Self Service</text> 
</g>

來源

2015-01-28 23:16:33

退出不能正常工作

回答

相關問題