0

我正在学习 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();

也应该工作。但事实并非如此。

有人知道那部分有什么问题吗？非常感谢！

4

2 回答 2

1

请注意他示例的这一部分：

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

然后：

circle.exit().remove();

在您的情况下，您试图.exit().remove()在 p 变量上运行，而不是在其中的数据上运行。在他的示例中，他在附加到圆圈的数据上调用它。

于 2013-07-06T00:20:37.010 回答
0

尝试

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

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

于 2013-07-06T00:22:34.250 回答