D3选择集合核心方法(三)：property、attr

来源：互联网发布：聚宝盆时时彩计划软件编辑：程序博客网时间：2024/06/05 05:06

假定已执行的JS代码如下：

   d3.select('button')     .data([{name : 'yiifaa'}]).enter()     .append('button').text(function (d) {        return d.name;     })

1. 赋值

attr()赋值必须为简单类型，如果是对象的话，则会调用对象的toString()方法，然后将值赋给元素的属性。

d3.select('button').attr("name", {id : 1, name : 'yiifaa'})//  执行后的HTML代码，<header name="[object Object]">yiifaa</header>//  里面的值无法再复原

property则无此限制，并且不会表现在元素的属性上。

d3.select('button').attr("name", {id : 1, name : 'yiifaa'})//  执行后HTML代码没有变化，可以调用控制器进行查看

2. 数据

可通过property查看元素的数据属性data，得到的结果完全与datum相同，而attr则无法获取数据，如下：

alert(d3.select('button').property("__data__") === d3.select('button').datum());//  将会弹出true

3. 空元素

假定不存在id为yiifaa的元素，用attr()与property()分别对齐进行赋值，则property()方法会报错，而attr不会。

//  不会报错d3.select('#yiifaa').attr("name", {id : 1, name : 'yiifaa'})//  会报错d3.select('#yiifaa').property("name", {id : 1, name : 'yiifaa'})

4. 布尔值

对于HTML元素的disabled、checked、selected等枚举值属性，attr()与property()的赋值方式不一样，并且获取到结果也不一致。

//  赋值为disabled兼容性更好，赋值为true的话只有少数最新的浏览器支持d3.select('button').attr("disabled", "disabled")//  赋值为trued3.select('button').property("disabled", true)//  获取到的值为disabledalert(d3.select('button').attr("disabled"))//  获取到的值为truealert(d3.select('button').property("disabled"))

0 0