exit() 与 remove() 的区别

先进行remove()后会删除掉节点,但是selection还会存在。
先exit() 将会清楚掉selection里面的内容，在调用remove()将不会删除掉节点。

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <title>d3 5.15.1</title>
  6.   <script src="../lib/d3.js" type="text/javascript"></script>
  7.   <style>
  8.     .text {
  9.       text-indent: 2em;
  10.     }
  12.     .pre {
  13.       white-space: pre-wrap;
  14.       background-color: #eee;
  15.       border: 1px solid #ccc;
  16.     }
  17.   </style>
  18. </head>
  20. <body>
  21.   <a href="../index.html">首页</a>
  22.   <script>
  23.     var matrix = [
  24.       [11975, 5871, 8916, 2868],
  25.       [1951, 10048, 2060, 6171],
  26.       [8010, 16145, 8090, 8045],
  27.       [1013, 990, 940, 6907]
  28.     ];
  30.     var body = d3.select("body");
  31.     /* body = {
  32.       _groups: Array(1)
  33.         0: [body]
  34.         length: 1
  35.       _parents: [html]
  36.     } */
  37.     var table = body.append("table");
  38.     /* table = {
  39.       _groups: Array(1)
  40.         0: [table]
  41.         length: 1
  42.       _parents: [html]
  43.     } */
  44.     var tr = table.selectAll("tr");
  45.     /* tr = {
  46.       _groups: [NodeList(0)]
  47.       _parents: [table]
  48.     } */
  49.     var tr1 = tr.data(matrix);
  50.     /* tr1 = {
  51.       _groups: Array(1)
  52.         0: (4) [empty × 4]
  53.         length: 1
  54.       _parents: [table]
  55.       _enter: Array(1)
  56.         0: (4) [EnterNode, EnterNode, EnterNode, EnterNode]
  57.         length: 1
  58.       _exit: Array(1)
  59.         0: []
  60.         length: 1
  61.     } */
  62.     var tr2 = tr1.enter();
  63.     /* tr2 = {
  64.       _groups: Array(1)
  65.         0: Array(4)
  66.           0: EnterNode {ownerDocument: document, namespaceURI: "http://www.w3.org/1999/xhtml", _next: null, _parent: table, __data__: Array(4)}
  67.           1: EnterNode {ownerDocument: document, namespaceURI: "http://www.w3.org/1999/xhtml", _next: null, _parent: table, __data__: Array(4)}
  68.           2: EnterNode {ownerDocument: document, namespaceURI: "http://www.w3.org/1999/xhtml", _next: null, _parent: table, __data__: Array(4)}
  69.           3: EnterNode {ownerDocument: document, namespaceURI: "http://www.w3.org/1999/xhtml", _next: null, _parent: table, __data__: Array(4)}
  70.           length: 4
  71.         length: 1
  72.       _parents: [table]
  73.     } */
  74.     var tr3 = tr2.append("tr");
  75.     /* tr3 = {
  76.       _groups: Array(1)
  77.         0: Array(4)
  78.           0: tr: { 类型HTMLElement
  79.              __data__: [11975, 5871, 8916, 2868],
  80.              nodeType: 1
  81.           }
  82.           1: tr
  83.           2: tr
  84.           3: tr
  85.         length: 4
  86.       length: 1
  87.       _parents: [table]
  88.     } */
  90.     var td = tr3.selectAll("td");
  91.     /*
  92.       td = {
  93.         _groups: (4) [NodeList(0), NodeList(0), NodeList(0), NodeList(0)]
  94.         _parents: (4) [tr, tr, tr, tr]
  95.       }
  96.     */
  97.     var td1 = td.data(function (d) { return d; });
  98.     /*
  99.       td1 = {
  100.         _groups: (4) [Array(4), Array(4), Array(4), Array(4)]
  101.           0: (4) [empty × 4]
  102.           1: (4) [empty × 4]
  103.           2: (4) [empty × 4]
  104.           3: (4) [empty × 4]
  105.         _parents: (4) [tr, tr, tr, tr]
  106.         _enter: (4) [Array(4), Array(4), Array(4), Array(4)]
  107.         _exit: (4) [Array(0), Array(0), Array(0), Array(0)]
  108.       }
  109.     */
  110.     var td2 = td1.enter().append("td");
  111.     /*
  112.       td2 = {
  113.         _groups: Array(4)
  114.           0: (4) [td, td, td, td]
  115.           1: (4) [td, td, td, td]
  116.           2: (4) [td, td, td, td]
  117.           3: (4) [td, td, td, td]
  118.           length: 4
  119.         _parents: (4) [tr, tr, tr, tr]
  120.       }
  121.     */
  122.     var td3 = td2.text(function (d) { return d; });
  123.     /*
  124.       td3 = {
  125.         _groups: Array(4)
  126.           0: (4) [td, td, td, td]
  127.           1: (4) [td, td, td, td]
  128.           2: (4) [td, td, td, td]
  129.           3: (4) [td, td, td, td]
  130.           length: 4
  131.         _parents: (4) [tr, tr, tr, tr]
  132.       }
  133.     */
  135.     var td6 = td3.remove();
  136.     /*
  137.       td6 = {
  138.         _groups: Array(4)
  139.           0: (4) [td, td, td, td]
  140.           1: (4) [td, td, td, td]
  141.           2: (4) [td, td, td, td]
  142.           3: (4) [td, td, td, td]
  143.           length: 4
  144.         _parents: (4) [tr, tr, tr, tr]
  145.       }
  146.     */
  147.     var td7 = td6.exit();
  148.     /*
  149.       td7 = {
  150.         _groups: Array(4)
  151.           0: (4) [empty × 4]
  152.           1: (4) [empty × 4]
  153.           2: (4) [empty × 4]
  154.           3: (4) [empty × 4]
  155.           length: 4
  156.         _parents: (4) [tr, tr, tr, tr]
  157.       }
  158.     */
  160.     // var td4 = td3.exit();
  161.     /*
  162.       td4 = {
  163.         _groups: Array(4)
  164.           0: (4) [empty × 4]
  165.           1: (4) [empty × 4]
  166.           2: (4) [empty × 4]
  167.           3: (4) [empty × 4]
  168.           length: 4
  169.         _parents: (4) [tr, tr, tr, tr]
  170.       }
  171.     */
  173.     // var td5 = td4.remove();
  174.     /*
  175.       td5 = {
  176.         _groups: Array(4)
  177.           0: (4) [empty × 4]
  178.           1: (4) [empty × 4]
  179.           2: (4) [empty × 4]
  180.           3: (4) [empty × 4]
  181.           length: 4
  182.         _parents: (4) [tr, tr, tr, tr]
  183.       }
  184.     */
  185.   </script>
  186. </body>
  188. </html>