Как использовать класс d3 для определения имени как функции

Я использую класс d3 classed selection, а в первом параметре вместо String я хочу использовать функцию, которая вернет имя класса.

selection.classed(name[, value])

Я понимаю, что могу сделать то же самое с использованием attr, как упоминалось здесь, но я хочу иметь возможность делать то же самое с помощью classed. Как я могу это сделать?

Ответы

Ответ 1

Имя класса, которое вы там указываете, должно быть исправлено, т.е. вы не можете иметь что-то вроде function(d) { return d; }. Если вам нужно имя класса, которое будет определено данными, вам нужно использовать .attr("class", ...).

Если вы беспокоитесь о перезаписи существующих имен классов, обратите внимание, что вы можете получить и добавить их следующим образом.

.attr("class", function(d) { return d3.select(this).attr("class") + " " + d; })

Ответ 2

Я столкнулся с аналогичной проблемой, в которой я хотел добавить один класс, если свойство в моей базе данных было истинным и другим классом, если свойство было ложным:

selection.classed('class-one', function(d) { return d.property; })
    .classed('class-two', function(d) { return d.property; });

Если у вас есть небольшое количество классов для добавления, то что-то вроде этого, возможно, стоит рассмотреть.

Ответ 3

Ответ на Lars велик, но если вы начинаете без класса в атрибуте, он добавит класс 'null' к элементу, так как нулевой атрибут будет привязан к строке. Естественный следующий шаг от его:

.attr("class", function(d) {
      var existing = d3.select(this).attr("class") 
      if (existing == null){
        return d.column.class
      }else{
        return existing + " " + d.column.class
      }
})

Это может быть сделано в однострочный с тернарным оператором, если вы хотите, чтобы он был более кратким

Ответ 4

Как и в предлагаемом ответе, но я нашел

selection.each(function(d) { d3.select(this).classed(d.class, true)

также работает.