.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是添加先前現有的類。