Add/remove class names
21,711 views
Skip to first unread message
JamesM
Apr 18, 2011, 4:04:02 PM4/18/11
to d3-js
hi all
Newbie question: is there a D3 utility function for adding/removing
class names? (bearing in mind there may be multiple class names).
cheers
James
Newbie question: is there a D3 utility function for adding/removing
class names? (bearing in mind there may be multiple class names).
cheers
James
Mike Bostock
Apr 18, 2011, 4:38:00 PM4/18/11
to d3...@googlegroups.com
Yes, there is a 'classed' operator which takes boolean values. True
will add the class (if not already present), and false will remove the
class (if present). Due to inconsistencies in the DOM, this operator
does not currently work on SVG nodes, but that's a bug I plan on
fixing soon.
will add the class (if not already present), and false will remove the
class (if present). Due to inconsistencies in the DOM, this operator
does not currently work on SVG nodes, but that's a bug I plan on
fixing soon.
Mike
James Munro
Apr 18, 2011, 5:27:08 PM4/18/11
to d3...@googlegroups.com
Thanks Mike - works perfectly.
James
Benjamin Chun
Dec 9, 2011, 3:46:59 AM12/9/11
to d3...@googlegroups.com
Was this bug ever fixed? I'm having trouble using 'classed' on SVG nodes, but 'attr' seems to work fine.
Mike Bostock
Dec 9, 2011, 10:29:28 AM12/9/11
to d3...@googlegroups.com
> Was this bug ever fixed? I'm having trouble using 'classed' on SVG nodes,
> but 'attr' seems to work fine.
> but 'attr' seems to work fine.
Yes, this bug was fixed.
Mike
Mike Heavers
Mar 30, 2012, 4:57:06 PM3/30/12
to d3...@googlegroups.com
Sorry - can you provide an example? I'm using:
.classed("active",false);
and it's not working. Tried true as well.
Mike Bostock
Mar 30, 2012, 4:59:21 PM3/30/12
to d3...@googlegroups.com
> Sorry - can you provide an example?
Sure, go here:
http://mbostock.github.com/d3/ex/choropleth.html
Then open the JavaScript console, and try these:
> d3.select("#counties").classed("Blues")
> d3.select("#counties").classed("Blues", false)
> d3.select("#counties").classed("Greens", true)
Mike
Douglas Armstrong
Aug 9, 2013, 2:08:04 PM8/9/13
to d3...@googlegroups.com, mbos...@cs.stanford.edu
Hmm, I'm also finding that classed() is not working with an SVG element (where I can still change the class using attr()). This is with D3 3.0.2.
al lin
Aug 12, 2013, 2:43:33 PM8/12/13
to d3...@googlegroups.com, mbos...@cs.stanford.edu
Hi Douglas,
I just happened to use classed() today for my project and it seems to work fine. Are you inspecting the elements in the DOM to see if the class is being added?
Also, if you could post up a code snippet, it would be helpful.
Cheers,
al
Richard Welsh
Jun 16, 2014, 5:54:03 AM6/16/14
to d3...@googlegroups.com, mbos...@cs.stanford.edu
Hello,
I too am finding that .classed() doesn't work on SVG elements, but .attr() does. I'm using D3 version 3.4.8 and Chrome version 35.0
Richard
Sebastian Lasse
Jul 12, 2014, 6:29:35 AM7/12/14
to d3...@googlegroups.com
Well - for me it is working too.
Why can't people just saying "not working" post reproducible code ?
However I recognized a common mistake when using this in events:
false:
this.classed('selected');
correct:
d3.select(this).classed('selected');
Ian Kleinfeld
Apr 17, 2015, 6:20:17 PM4/17/15
to d3...@googlegroups.com
Works great for me, thanks @MikeBostock!
רחלי פריש
Feb 15, 2017, 4:44:52 AM2/15/17
to d3-js
HI @Mike,
It is still not working in d3v4
I do this. may be the bug return?
בתאריך יום שישי, 30 במרץ 2012 בשעה 23:57:06 UTC+3, מאת Mike Heavers:
בתאריך יום שישי, 30 במרץ 2012 בשעה 23:57:06 UTC+3, מאת Mike Heavers:
Reply all
Reply to author
Forward
0 new messages