В d3, когда уместно использовать

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

В отличие от

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

?

Рекомендуется или ожидается, что он будет объявлен устаревшим? Что такое отраслевой стандарт?

18
asparism 28 Май 2017 в 08:46

2 ответа

Лучший ответ

Я думаю, что classed является своего рода условной проверкой, например: Чтобы добавить класс, второй параметр в classed должен быть true, как в этом коде:

  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 имеет другие применения, для которых classed нельзя использовать. Для справки

8
Black Mamba 28 Май 2017 в 05:54

Не существует подходящего метода, рекомендуемого или стандартного . Оба являются допустимыми методами, и решение о том, какой из них использовать, зависит от вашей конкретной цели.

Основное различие между classed("foo", true) и attr("class", "foo") заключается в том, что первый будет модифицировать classList, если он уже существует ...

Если указано значение, присваивает или отменяет назначение указанных имен классов CSS для выбранных элементов, устанавливая атрибут класса или модифицируя свойство 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 добавлен к ранее существующим классам.

17
Gerardo Furtado 10 Окт 2017 в 06:59