D3.js exit странное поведение

Я изучаю D3.js и имею некоторые вопросы о функции exit(). Посмотрите пример кода нижеD3.js exit странное поведение

<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 элемента. Это работает.

Однако, по словам tutotiral Майка Bosock в 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();

В вашем случае, если вы пытаетесь запустить .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 exit странное поведение

ответ

Смежные вопросы