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 tab的元素。代码提供4个数据项，.exit（）。remove（）删除7-4 = 3个额外的p元素。之后设置4个元素的大小。这有效。

然而，根据Mike Bosock的tutotiral 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()而不是在其中的数据上运行{{1}}。在他的例子中，他在附加到圆圈的数据上调用它。

Answer 2

尝试

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

selectAll()是一个选择器selectAll().data().exit()

D3.js退出奇怪的行为

2 个答案: