d3中的selection.style和selection.attr的区别

例如

.on("mouseover",
        function() {
            d3.select(this)
                .select("text")
                .style("fill","red");
        })

和

.on("mouseover",
        function() {
            d3.select(this)
                .select("text")
                .attr("fill","red");
        })

如果我们看其运行后的结果，可以看到分别为：

<text style="fill: red">...

<span style="font-weight: normal;"><text fill="red">...</span>

详细解释：

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元素指定属性的值。