D3.js退出奇怪的行爲

我正在學習D3.js並且有一些關於exit（）函數的問題。看看下面的示例代碼D3.js退出奇怪的行爲

<html> 

<head> 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 

</head> 

<body> 

    <h1>Hello, World!</h1> 
    <p>Test of selection of D3.js</p> 
    <p>Test of selection of D3.js</p> 
    <p>Test of selection of D3.js</p> 
    <p>Test of selection of D3.js</p> 
    <p>Test of selection of D3.js</p> 
    <p>Test of selection of D3.js</p> 
    <p>Test of selection of D3.js</p> 


    <script> 
     var p = d3.selectAll("p"); 


     p.data([13,17,21,25])    
     .exit() 
     .remove(); 

     p.style("font-size", function(d) { return d+"px";}); 


    </script> 


</body> 

<html>

基本上，我有7個元素與p選項卡。代碼提供4個數據項，.exit（）。remove（）移除7-4 = 3個額外的p元素。之後設置4個元素的大小。這工作。

然而，據邁克Bosock的tutotiral http://mbostock.github.io/d3/tutorial/circle.html，將「破壞因素」部分

p.data([13,17,21,25]); 
p.exit().remove();

應該正常工作。但事實並非如此。

任何人都知道那部分有什麼問題？非常感謝！

來源

2013-07-06 Alfred Zhong

注意他的這部分示例：

var circle = svg.selectAll("circle") 
    .data([32, 57]);

然後：

circle.exit().remove();

你的情況，你想對p變量，而不是在它的數據運行.exit().remove()。在他的例子中，他用附在圈子上的數據來稱呼它。

來源

2013-07-06 00:20:37

這是有道理的，謝謝！ –

嘗試

var p = d3.selectAll("p"); 
p = p.data([13,17,21,25]); 
p.exit().remove();

selectAll()是一個選擇的是selectAll().data().exit()

來源

2013-07-06 00:22:34 orange

D3.js退出奇怪的行爲

回答

相關問題