.attr VS在D3.js

Question

在D3 .classed，什么时候适合使用

d3.select("foo").attr('class', 'bar'); 

，而不是

d3.select("foo").classed('bar', true); 

？

是一个建议或预计将弃用？什么是行业标准？

Answer 1

我觉得classed是一种例如有条件的检查： 要添加一个类，以归入第二个参数必须是真实的，因为在此代码：

d3.selectAll(".bar") 
.classed("my-selector", true); 

想删除一个类中，分类的第二个参数必须是假的。

d3.selectAll(".bar") 
    .classed("my-selector", false); 

要翻转一类为相反的状态 - 如果它已经存在将其删除，添加它，如果它不存在 - 你可以做以下的一个。

对于单个元素，代码可能是这样的：

var oneBar = d3.select(".bar") 
oneBar.classed("my-selector", !oneBar.classed("my-selector")); 

都归类和attR具有同等的重要性和attr具有classed不能用于其他用途。 For refference

Answer 2

没有适当方法，或推荐，或标准。两者都是有效的方法，并决定使用哪一个取决于您的具体目的。

classed("foo", true)和attr("class", "foo")之间的主要区别是，如果指定的值是前者只会修改班级列表如果它已经存在......

，分配或取消分配上指定的CSS类名通过设置class属性或修改 classList属性来选择元素并返回此选择。 （重点是我的）

......而后者将覆盖它。

让我们在一个非常简单的演示中展示它们的区别。

在DOM中已经有已分配类的段落。我们选择它们并在选择中使用attr("class", "someClass")。然后，我们console.log类的每一个：

var p = d3.selectAll("p"); 
 
p.attr("class", "someClass"); 
 
p.each(function() { 
 
    console.log(d3.select(this).attr("class")) 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<p class="foo">This paragraph has a class foo</p> 
 
<p class="bar">This paragraph has a class bar</p> 
 
<p class="baz">This paragraph has a class baz</p>

你可以看到，someClass覆盖以前存在的类。

现在使用classed("someClass", true)相同的代码：

var p = d3.selectAll("p"); 
 
p.classed("someClass", true); 
 
p.each(function() { 
 
    console.log(d3.select(this).attr("class")) 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<p class="foo">This paragraph has a class foo</p> 
 
<p class="bar">This paragraph has a class bar</p> 
 
<p class="baz">This paragraph has a class baz</p>

正如你所看到的，someClass是添加先前现有的类。