D3.js退出異常行為

Question

我正在學習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個元素的大小。 這可行。

但是，根據Mike Bosock的學說http://mbostock.github.io/d3/tutorial/circle.html ，“銷毀元素”部分

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

應該也可以。 但事實並非如此。

有人知道那部分出了什么問題嗎？ 非常感謝！

Answer 1

請注意他的示例的這一部分：

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

然后：

circle.exit().remove();

在您的情況下，您嘗試對p變量而不是對其中的數據運行.exit().remove() 。 在他的示例中，他在附加到圓上的數據上調用它。

Answer 2

嘗試

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

selectAll()和selectAll().data().exit()一樣都是選擇器

D3.js退出異常行為

問題描述

2 個解決方案

解決方案1
1 2013-07-06 00:20:37

解決方案2
0 2013-07-06 00:22:34

D3.js退出異常行為

問題描述

2 個解決方案

解決方案1 1 2013-07-06 00:20:37

解決方案2 0 2013-07-06 00:22:34

解決方案1
1 2013-07-06 00:20:37

解決方案2
0 2013-07-06 00:22:34