■ - memo

仕事で少しだけD3.jsを触った。サンプルを見ただけじゃ全然分からなかったけど、超懇切丁寧な日本語のチュートリアル http://ja.d3js.info/alignedleft/tutorials/d3/ が感動的なまでに分かりやすかた。
複雑怪奇なcssを駆使しなきゃならんjQueryより基本的な属性名が分かりやすいsvgとD3の時代がやって来るかもしらん。まあ残念ながら過去の遺産持ってる方が強いけどね。選挙でも現職が強いし。

exitがよくわからなかったので実験。

<!DOCTYPE html>
<html lang="ja">
  <head>
     <meta charset="utf-8">
     <title>D3 Test</title>
     <script type="text/javascript" src="d3.js"></script>
  </head>
  <body>
     <script type="text/javascript">
        var dataset = [1,2,3,4,5];
        var w = 500, h = 500;

        var svg = d3.select('body').append("svg")
           .attr("width", w)
           .attr("height", h);

        var circle = svg.selectAll('circle');
        circle.data(dataset).enter().append('circle').attr("cx", function(d, i) { return (i * 100) + 50; })
        .attr('cy', 250).attr('r', function(d, i){ return Math.sqrt((i+1) * 10);});

        setTimeout(function() {
          console.log("exit test");
          svg.selectAll('circle').data([1,2,3]).exit().remove();
          //circle.exit().remove();   // これだと何も起こらない
        }, 5000);
     </script>
  </body>
</html>

enter()/exit()が効くのは、data()関数でデータを与えて、データと要素とのペアを作って、なにか変換(描画とか)されるまでっぽい。
enter()で作った分を直後にexit()で、取得出来るのかと思ったけど、そういうわけではないようだ。
あたりまえと言えば当たり前だな。そんときは分からなかったけど。