d3 选择器

Posted 2020-10-01 aGod

一、隔了一段时间没看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);
         };
         */