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>

基本的に、pタブで7つの要素があります。コードは 4 つのデータ項目を提供し、.exit().remove() は 7-4 = 3 個の余分な p 要素を削除します。その後、4 つの要素のサイズが設定されます。これは機能します。

ただし、Mike Bosock のチュートリアルhttp://mbostock.github.io/d3/tutorial/circle.htmlによると、「Destroying Elements」の部分は

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 に答える