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

在看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属性；