d 3選択集合の操作方法一selectとselectAll

5112 ワード
まず、巨牛巨牛の人工知能のチュートリアルを共有します.私が何気なく発見しました.教程は基础がゼロなだけではなくて、分かりやすくて、その上とても面白くてユーモアがあって、また时々内包の下ネタがあって、小说を読むように、はは～私は勉强している中で、とても牛だと感じて、だからみんなに分かち合います!ここをクリックするとチュートリアルにジャンプできます
                    
selectとselectAllが返す結果はいずれもd 3の選択集合であり、集合演算が可能である.唯一異なるのは集合の数であり、selectの数は1以下であり、常に最初の要素(存在する場合)を返す.最も驚くべきことに、selectは集合の親子関係を確立することが難しい.selectAllは選択したすべての要素です.ドキュメントに存在するdom要素を次のように仮定します.<body>    <ul id="user-list">        <li class="list-group-item">0001        li>        <li class="list-group-item">0002        li>    ul>body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
    • テストの関連コードは次のとおりです.alert(d3.select('#user-list>li.list-group-item').size());   //  1alert(d3.selectAll('#user-list>li.list-group-item').size());    // 2//  var datas = [{    name :　"yiifaa",    age  :  32}, {    name :　"yiifee",    age  :  29},  {    name :　"yiifoo",    age  :  29}];// d3.select('#user-list')  .select('li.list-group-item')  .data(datas)    .enter()  // ，   .append('li')  .classed('list-group-item', true)  .text(function(d) {      return d.name;  });//  selectAllvar addItems = d3.select('#user-list')                  .select('li.list-group-item')                  .data(datas)                    .enter();// ， 0  alert(addItems.size()); //  0                 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
    • 上記のコードを実行すると、出力されるHTMLノードは次のようになります.selectの新しい要素の挿入位置をよく見てください.<body>    <ul id="user-list">        <li class="list-group-item">0001        li>        <li class="list-group-item">0002        li>    ul>body><li class="list-group-item">yiifeeli>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    •            
    人工知能チュートリアルの参照
    2018計算導論とプログラム設計練習問題課九D.calc the sum
    【Android】Activityのメニューメカニズムと方法解析