Question

在d3中，什么时候适合使用

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

而不是

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

是推荐还是预计会弃用？什么是行业标准？

Answer 1

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

classed("foo", true)和attr("class", "foo")之间的主要区别在于前者只会修改 classList（如果它已经存在...）

如果指定了值，则通过设置class属性或修改 classList属性来指定或取消分配所选元素上的指定CSS类名，并返回此选择。（强调我的）

...而后者将覆盖它。

让我们在一个非常简单的演示中展示差异。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

您可以看到someClass会覆盖以前存在的类。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

如您所见，someClass 已添加到以前存在的类中。

Answer 2

我认为classed是一种有条件的检查，例如：要添加类，要分类的第二个参数必须为true，如下面的代码所示：

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

要删除某个类，要归类的第二个参数必须为false。

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

要将类翻转到相反的状态 - 如果它已经存在则将其删除，如果它尚不存在则添加它 - 您可以执行以下操作之一。

对于单个元素，代码可能如下所示：

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

class和attr具有同等重要性，attr具有classed不能用于的其他用途。 For refference

.attr与D3.js中的.classed

2 个答案: