美文网首页
第二章 d3选择

第二章 d3选择

作者: Doter | 来源:发表于2017-09-02 18:14 被阅读0次

    选择

    1.1 select

    选择匹配的第一个元素

    1.2 selectAll

    选择匹配的第一个元素(数组)

    1.3 selection 选择集

    就是使用select或者selectAll选择返回的结果
    dispatch (type, params) 派发事件,具体参考事件

    each (callback)
    对于分组后的数据遍历

    exit()

    filter (match)

    var even = d3.selectAll("tr").filter(":nth-child(even)");
    等价于:
    
    var even = d3.selectAll("tr:nth-child(even)");
    

    interrupt (name)

    lower ()
    重新将元素插入到对应父元素,作为父元素的第一个子元素,相当于:

    selection.each(function() {
      this.parentNode.insertBefore(this, this.parentNode.firstChild);
    });
    

    merge (selection$$1)

    circle.enter().append("circle") // ENTER
        .style("fill", "green")
      .merge(circle) // ENTER + UPDATE
        .style("stroke", "black");
    

    order()

    raise ()
    重新将元素插入到对应父元素,作为父元素的最后一个子元素。相等于:

    selection.each(function() {
      this.parentNode.appendChild(this);
    });
    

    sort (compare)

    transition(name)

    1.3.1 查看状态

    empty() 是否为空
    node () 当前html内容,例如:<div id='root'></div> 只返回第一个
    size () 选择的数量
    nodes()当前dom对象

    1.3.2 设定和获取属性

    attr() 设置(获取)节点属性
    classed() 设置或查看是否有该类
    style() 设置(获取)节点样式
    property() 用于处理HTML元素具有特殊的属性使用标准的属性或样式是不可寻址的
    text() 设置获取选择集文本
    html() 设置或获取内部html内容

    1.3.3 添加、插入和删除

    append(name)
    insert (name, before)
    remove()

    1.3.4 数据绑定

    datum (value)
    将选择集中的每一个元素绑定相同的数据value
    data (value, key)
    将选择集中的每一个元素分别绑定数组中的每一项,key指定绑定规则,默认是:1-1,2-2...

    1.3.5 数据与元素数量不一致

    enter() 当数据>元素 部分
    exit() 当数据<元素 部分

    var update = d3.selectAll("p").data(dataSet)
    var enter = update.enter()
    var exit = update.exit()
    //update 只更新内容
    update.text(function(d){return d;})
    //enter 添加元素后加入内容
    update.append('p').text(function(d){return d;})
    //exit 删除元素
    update.remove()
    
    1.3.6 其余

    filter() 过滤器
    sort() 排序
    order() 重新插入数据后再排序,相当于重新调用sort(),但性能更好
    each() 各元素单独处理
    call() 将选择集自身做参数,传给函数

    相关文章

      网友评论

          本文标题:第二章 d3选择

          本文链接:https://www.haomeiwen.com/subject/nedrjxtx.html