D3 добавить несколько классов с функцией

У меня есть svg as:

<g class="user" title="Michael" rel="tooltip" transform = "rotate(-12.364052661705784)translate(360)" style="fill: #9467bd; "></g>

Я хочу добавить класс так же, как и заголовок. Я попробовал

d3.selectAll('.user').attr('class','Michael');

Но он заменил исходный класс. Затем я попробовал

d3.selectAll('.user').classed('Michael',true);

Это работает! Но теперь я хочу вернуть имя класса с помощью функции типа

d3.selectAll('.user').classed(function(){return this.attr('title');},true);

Это не работает. Как я могу это сделать?

Спасибо

Ответ 1

Вы можете назначить несколько классов элементам, просто разделив их имена на пробелы:

d3.selectAll(".user").attr("class", "user Michael");

Но вам кажется, что вам действительно нужно назначить свойство данных своим элементам, для которых гораздо лучше использовать атрибуты данных HTML5. Таким образом, вы можете сделать:

d3.selectAll(".user").attr("data-name", function(d,i) { return "Michael #" + i; });

а затем для получения имени пользователя:

d3.select(".user").attr("data-name")

Ответ 2

зачем использовать атрибуты данных HTML5, дублируя данные, которые уже есть в атрибуте title? Атрибуты данных HTML5 наверняка полезны, но дублирование данных не очень хорошо.

Легко сделать это без дублирования данных, будучи близким к тому, что вы имели в виду изначально.

d3.selectAll('.user').each(
    function(){
        var elt = d3.select(this);
        elt.classed(elt.attr("title"), true);
    }
)

Ответ 3

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

d3.selectAll('.user').node().classList.add("mynewclass");

Может не работать в очень старых браузерах.