Question

167

d3 add multiple classes with function

rated 0 times [ 174] [ 7] / answers: 1 / hits: 96050 / 12 Years ago, fri, november 2, 2012, 12:00:00

I have the svg as:

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

I want to add a class as the same as title. I tried

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

But it replaced the original class. Then I tried

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

It works! But now I want to return the class name with a function like

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

It doesn't work. How can I do that?

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kalynnkathrynd

Add To Favorites

Follow

Total Points: 273

Total Questions: 101

Total Answers: 93

Location: Nauru

Member since Thu, Feb 2, 2023

1 Year ago

answered 12 Years ago aidan · Accepted Answer

You can assign multiple classes to elements by simply separating their names with spaces:

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

But it seems that what you really need is to assign a data property to your elements for which it is much better to use the HTML5 data- attributes. So you could do:

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

and later to obtain the name of a user:

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