d3 classed() not working as expected with multiple classes?

[d3guy]

I've created the following scss definition:

.regionBackgroundHighlighter
{
    .highlight
    {
        fill:#CCCCCC;
        opacity:0.5;
        stroke:black;
        stroke-width:0;
        display:inline;
        visibility:visible;
    }
}

I'm trying to set this css class to an element as follows but the style isn't getting applied:

d3.select(regionBackground).classed('regionBackgroundHighlighter highlight', true);

In Chrome Dev Tools, regionBackground shows both regionBackgroundHighlighter and highlight in its classList[] but the actual style isn't getting applied to the element. However if I pass the same class definition as one-level un-nested class then the style gets applied as expected:

.regionBackgroundHighlight
{
    fill:#CCCCCC;
    opacity:0.5;
    stroke:black;
    stroke-width:0;
    display:inline;
    visibility:visible;
}

d3.select(regionBackground).classed('regionBackgroundHighlight', true);

Do I need to use the d3 classed() function differently for the type of css structure I have defined in my first example above?

[Seemant Kulleen]

Happy Wednesday/Thursday d3.guy,

You're almost there!  You can use the .classed() function multiple times because it's a non-destructive way to amend the classList of an element.  Unlike .class("list of classes here"), which will set the classList to exactly that, overwriting whatever was before.

Perhaps you can try something along these lines:

blah...blah..blah.classed('regionBackgroundHighlight', true).classed('highlight', true)

Hope that helps.

Cheers,

Seemant

 

--

Oakland Finish Up Weekend
Be Amazed.  Be Amazing.
Get Mentored | Get Inspired | Finish Up

http://oaklandfinishup.com

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Joe Keohan]

d3guy,

I created this simple copden to test something similar and see if I could better understand what's going on once scss is compiled and although the classes are indeed getting assigned via the .classed() method, once scss is compiled into normal css it put's spaces between the two classes which indicates that they have a parent\child relationship vs being assigned to the same element where there wouldn't be any spaces present.  I mean scss is doing what is expected as you are nesting child elements using that pattern.  Perhaps you need to assign the first class to it's parent and then the second via D3. 

Joe