.attr与D3.js中的.classed

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每个人的班级:

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已添加到以前存在的类中.

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"));

分类和属性同等重要，并且attr具有其他classed不能使用的用途。 供参考