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>

      操作的代码如下：

//  选择器唯一性识别函数
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>

      上面都是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);