分享

d3.js:数据可视化利器之 修改文档:DOM操作符

 看见就非常 2015-04-24

style: CSS样式操作符

style()操作符用来设置获取选择集中各DOM元素的CSS样式

  1. selection.style(name[,value[,priority]])

style()操作符有三个参数:

  • name: 样式名称字符串,必须
  • value:指定样式新的值,可选
  • priority:优先级,可以是null或字符串"important",可选

读取样式当前值

如果没有指定参数value,那么style()将返回选择集中第一个DOM元素指定样式的 计算值。请注意,这时只返回第一个元素的样式!

为样式设置新值

如果参数value是一个具体值,那么style()将选择集中所有DOM元素的指定 样式统一设置为该值。当value为null值时,将清除该样式值。

如果参数value是一个访问器函数,那么style()将依次对选择集中的每一个 DOM元素分别执行该函数,并使用其返回值来设置当前DOM元素指定样式的值。

同时设定多个样式

如果有多个样式需要同时设置,可以直接传入一个JSON对象:

  1. selection.style({'stroke': 'black', 'stroke-width': 2})

attr: 属性操作符

attr()操作符用来设置获取选择集中各DOM元素的属性:

  1. selection.attr(name[,value])

attr()操作符有两个参数:

  • name:指定要操作的属性名称,必须
  • value:指明要为该属性设置的新值或访问器函数,可选

读取属性当前值

如果没有指定参数value,那么attr()将返回选择集中第一个 DOM元素指定属性的当前值

为属性设置新值

参数value可以是一个具体值,这时attr()将选择集中所有DOM元素的指定属性值 统一设置为该值。

参数value也可以是一个访问器函数,这时attr()将依次对集合中的每一个元素 分别执行该函数,并使用其返回值作为当前处理DOM元素指定属性的值。

html:html内容操作符

html()操作符的实现基于DOM元素的innerHTML属性,因此设置 这个值将完全替换选择集中每一个DOM元素的全部内容:

  1. selection.html([value])

参数value是可选的,用来替换当前内容。

读取html内容

如果没有指定参数value,那么html()操作符将返回选择集中第一个 DOM元素的HTML内容。

设置html内容

如果参数value是一个具体值,那么html()操作符将选择集中所有 DOM元素的HTML内容统一设置为该值。

如果参数value是一个访问器函数,那么将依次对选择集中的每一个 DOM元素分别执行该函数,并使用其返回值来设置当前DOM元素的HTML内容。

text:文本内容操作符

text()操作符的实现基于DOM元素的textContent属性,因此设置 这个值将完全替换选择集中每一个DOM元素的全部内容:

  1. selection.text([value])

参数value是可选的,用来替换当前内容。

读取文本内容

如果没有指定参数value,那么text()操作符将返回选择集中第一个 DOM元素的文本内容。

设置文本内容

如果参数value是一个具体值,那么text()操作符将选择集中所有 DOM元素的文本内容统一设置为该值。

如果参数value是一个访问器函数,那么将依次对选择集中的每一个 DOM元素分别执行该函数,并使用其返回值来设置当前DOM元素的文本内容。

append:追加操作符

append()操作符向选择集中的每一个DOM元素追加一个子元素:

  1. selection.append(name)

name参数可以是一个HTML标签名,这时append()将为选择集中的每个 DOM元素使用这个标签名创建新元素,并向当前DOM对象追加该子元素。

name参数也可以是一个访问器函数,这时append()将为选择集中 的每个DOM元素执行这个函数,并将其返回的DOM对象追加为当前DOM元素的子元素。

需要指出的是,append()返回的是一个不同的选择集,其内容是新追加的这些 DOM元素:

append

示例地址:http://www./course/54fd40cfe564e50d50dcf284/

insert:插入操作符

insert()操作符向选择集中的每一个DOM元素,在指定子元素之前插入一个新元素:

  1. selection.insert(name[,before])

和append()一样,参数name可以是一个HTML标签名或者一个 访问器函数。位置参数before则使用与name同样的方式 指定一个用来定位的子元素。

当省略位置参数before时,新创建的元素将插入到最后,等效于append()。

同样地,insert()返回的是一个不同的选择集,其内容是新插入的这些 DOM元素:

insert

remove:删除操作符

remove()方法将选择集中的全部DOM元素从当前文档中移除

  1. selection.remove()

需要指出的是,remove()操作符并没有销毁这些移除的DOM元素,而仅仅是将 它们从当前文档中摘除,所返回的选择集内容没有发生变化:

remove

另外,当前d3没有提供专门的API将这些移除的DOM元素重新挂接到DOM树上。如果你需要 这个功能,可以使用append()insert()操作符。

参考资料:http://www./

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多