having problems associating a class to a d3 element?

[d3guy]

I'm having problems associating a class to a d3 element. I can set style attributes through the d3 style function like this:

d3.select(regionBackground).style('fill','darkgrey');

However, I'm not able to set style attributes when using the following approaches:

d3.select(regionBackground).attr('class', 'highlightRegionBackground');
d3.select(regionBackground).classed('highlightRegionBackground', true);

Any idea what I might be doing wrong here or how to debug?

[Peter Cook]

Both of these look correct. You could try (in Chrome) right-clicking the element in question and choosing 'Inspect' and checking whether your class has been set.

- Peter

[d3guy]

I have validated the following:

* the class exists in the css file for the page. 

* the rendered element has a class attr with the expected class name when the element is rendered. 

* the element is only associated with the expected class. 

I can easily set the element fill with the d3 style function but the classed function is not working. More specifically, the styles defined within a class set to the element is not working.

[d3guy]

I also validated that no style values have been set so no risk of style values overriding the class value

[d3guy]

It looks like maybe an css reference may need to be added to the svg:

https://www.w3.org/TR/SVG/styling.html#StylingWithCSS

Can you verify if this is the case?  I was assuming that an embedded svg would have access to the css stylesheet that was referenced by the webpage but maybe this was an incorrect assumption. The css file associated with the parent webpage is app.min.css.  I added a reference to this css file as the 2nd line in my svg but not sure if this is a valid reference:

<?xml version="1.0" encoding="utf-8"?>

<?xml-stylesheet href="app.min.css" type="text/css"?>

Either way, the class reference still isn't getting resolved. Does d3 provide an alternative way of somehow "injecting" a css link into an svg? Is there some other trick I need to get the svg to know about the css? Or am I misunderstanding the way in which SVG/D3/Webpages work with each other?

[Peter Cook]

Hmmm... not sure. Are you able to post a minimal example to jsbin (or similar)?

[Ram Tobolski]

>It looks like maybe an css reference may need to be added to the svg.

No, this is not usually needed, for an inline SVG. The SVG accesses the same CSS as the containing HTML.

[Curran]

+1 for posting an example. Without being able to run the code and debug it, it's literally impossible to tell what might be going wrong.

My first question would be "What's the value of the regionBackground variable?". Without being able to answer that question myself, by looking at a running example, I can't proceed any further in helping (even though I'm willing to spend the time).

You can use any of these tools to quickly post a runnable example that reproduces the problem:

• http://blockbuilder.org/
  
• https://jsfiddle.net
  
• https://jsbin.com/
  
• https://plnkr.co/