d3 選擇器

一、隔了一段時間沒看D3了，好多api又陌生了。武林太大，唯有自強不息。

　　D3 選擇器算是學習D3的第一步吧。 跟 學習JQ一樣。先熟悉下api，才能夠如魚得水，手到勤來。

二、 選擇器

　　1.選擇器

 /*
         　1.d3.select(dom);      dom => 可以是類，ID。說白了跟JQ的  $(dom) 完全一樣。不過select返回的時候。頁面中匹配到的第一個元素。 或者為null

         　2.d3.selectAll(dom);   => 跟JQ完全一樣。 $(dom)

         */

       2.內容（主要是更改DOM元素的屬性和類名的方法）

 /*
            1. selection.attr(name[, value])
            意思是
            (1) d3.selectAll('p').attr('data-href','http://baidu.com');
              相當於JQ中的 $(dom).attr(); 的方法一樣。
             (2) 其中value 為function的時候 (d,i, this) i=> 的選中元素的序號， this 當前的元素
              d3.select(this).attr('data-href',i)
             d3.selectAll('p').attr('data-href',function(d,i){
                 return i;
             })

            2.section.classed(name[,value]);
            跟上面的attr 基本一樣。顧名思義 => 就是對類名的操作。
             eg: d3.selectAll('div').classed({"foo":true,"bar":"false"});
               或者
               d3.selectAll('div').classed('foo bar',true);
               true => 對匹配的元素還為添加這個class名的元素添加這個class名字。
               false => 對匹配的元素有這個class名的元素去掉這個class名字
            3.section.style(name[, value[, priority]])
            跟上面classed 的用法基本一樣。我就不細說了
            eg:
                d3.selectAll('span').style({'color':'red','font-size':'50px'});
            4.selection.property(name[, value])
               跟classed的方法差不多。
               主要是針對表單元素中 的屬性  比如 ： disable,checkbox,radio。readonly等等

               eg : de.selectAll('input').property({'checkbox':true,'disable':false})
             5.select.text();
             這個方法跟JQ的text(); 方法一樣。
             6.section.html();  同上
             7.section.append();  想選中元素的后面插入dom節點
             跟jq一樣
             8. section.insert();  選中的dom 元素中的子節點前面插入
             9.section.remove();   溢出

         */

   3.section.data()

  /*
            section.data([values[, key]);的方法比較復雜。 主要涉及到幾點
            1.一種情況就是選中的元素和data數據剛好匹配。 這時候
            可以直接 
            html:
               <div class="div"></div>
               <div class="div"></div>
            
            d3.select("body").selectAll('.div').data([1,23]).text(function(d){
                return d;
            });
            2. 匹配元素有0個。單時候數據有多條的時候。
            d3.selectAll('.a').data([1,2,3]).enter().append('.a').text(function(d){
                return d;
            });
            3. 匹配的元素有多個的時候。也就是數據更少。需要把多余的元素刪掉
            d3.selectAll('.b').data([1]).exit().remove();
                       
            所以我們寫方法的時候。基本都是
            d3.selectAll('.c').data([1,2,3]).enter().append('.a').exit().remove();
            你們肯定發現了。這跟JQ的鏈式編程一樣。
            
            
          */
        //1.
        var matrix = [
            [11975,  5871, 8916, 2868],
            [ 1951, 10048, 2060, 6171],
            [ 8010, 16145, 8090, 8045],
            [ 1013,   990,  940, 6907]
        ];

        var tr = d3.select("body").append("table").selectAll("tr")
          .data(matrix)
          .enter().append("tr");

        var td = tr.selectAll("td")
          .data(function(d) { return d; })
          .enter().append("td")
          .text(function(d) { return d; });
        
        /*
            section.enter();
            section.exit();
            section.remove();的方法就不介紹了。上面有啊
        
         */

　　

 /*
            d3.section.datum

         獲取或設置每個選定的元素綁定的數據。不像selection.data方法，這種方法不計算一個連接（並因此不計算enter和exit的選擇）。此方法在selection.property之上實現：

         d3.selection.prototype.datum = function(value) {
         return arguments.length < 1
         ? this.property("__data__")
         : this.property("__data__", value);
         };
         */