D3js中attr添加class属性与classed添加属性的区别

最新推荐文章于 2024-07-12 14:49:11 发布

骤逝

最新推荐文章于 2024-07-12 14:49:11 发布

阅读量6.8k

点赞数 2

分类专栏： javascrip

本文链接：https://blog.csdn.net/qiuhan/article/details/86240234

版权

javascrip 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在看D3的例子是看到.classed("selected", true)这样的语句，开始简单的以为就是为DOM对象添加class属性的。于是想attr("class", "selected")是不是可以替换这个语句呢？

于是改造了例子，代码如下：

let srcFilterObjs = d3.select("body").selectAll("div.h-bar");
console.log(srcFilterObjs);
let filterObjs = srcFilterObjs.filter(function (d, i) { // <-E
    return d.category == category;
}); 
console.log(filterObjs);
console.log(filterObjs.classed("selected", true));
/*
    .classed("selected", true); ---A
    .attr("class", "selected"); ---B
*/

A是原来的语句，B是添加的语句。

使用B替换A后发现第二次运行代码时DOM对象增多了。通过查看发现

A是给DOM对象增加class属性；

B是覆盖了DOM对象的原有class属性；