d3选择集合的操作方法 五 insert与append

                     

      insert与append是d3中用于新增元素的方法,它们的用法完全相同,作用也完全相同,唯一的差别在于insert可以指定将新元素插入在什么位置,而append只能将元素添加在末尾。

      insert与append的作用过程可分为两步来理解,第一步是新增元素,第二步是选择新增元素,也就是说insert、append操作返回的结果都是新增的元素。

      在对页面上已存在的html元素,insert、append会在已存在的元素中添加新的子节点,而对于页面中不存在的元素,它们则是直接添加新增的元素,而非子节点,请参照代码说明。

      依旧假定页面中存在的HTML文档结构如下:

<ul class="list-group" id="list-group">    <li class="list-group-item">0001</li>    <li class="list-group-item">0002</li>    <li class="list-group-item">0003</li></ul>
  • 1
  • 2
  • 3
  • 4
  • 5

      操作的代码如下:

//  选择器唯一性识别函数var iden = function(d) {    //  如果已设置数据,则直接返回数据,否则返回内容解析后的整数    return d !== undefined ? d : parseInt(this.textContent);};//  如果是页面中已存在的html元素var items = d3.select("#list-group")                .selectAll(".list-group-item")                .data([2, 3, 4, 5], iden)                .exit() //  结果为第1个元素                .append("strong")                .text('yiifaa');alert(items.html()) //  输出yiifaa,此时items指向strong元素//  现在第一个元素的outerHTML为//  <li class="list-group-item">0001<strong>yiifaa</strong></li>//  如果是页面中不存在的元素items = d3.select("#list-group")                .selectAll(".list-group-item")                //  这里不添加唯一性识别函数,是因为上面添加了yiifaa字符,解析会出错                .data([2, 3, 4, 5])                .enter() //  结果为[5], 最后一个元素                .append("strong")                .text('yiifaa');alert(items.html()) //   输出yiifaa,此时items指向新增的元素,亦即最后一个元素,//  最后一个元素的outerHTML为// <li class="list-group-item">yiifaa</li>
  • 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

      上面都是append的用法,insert的用法完全相同,只是多了一个用于指示插入位置的参数,示例如下:

var item = d3.select("#list-group")            //  在#list-group的第2个子元素之前插入一个节点           .insert("li", ".list-group-item:nth-child(2)")           .classed("list-group-item", true)           .text("0004");item.classed("active", true);    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
           
上一篇:PythonStudy——字典的定义 Dictionary definition


下一篇:D3