Apply multiple styles with .style() method in D3.js

Question

As I'm making my first steps into d3.js I couldn't help myself noticing its approach is very similar to jQuery.

My question is:

When I need to modify multiple CSS properties of a style attribute of matching element is there a shorthand approach, like jQuery or ReactJS provide, like

.style({width:100, height:100, backgroundColor:'lightgreen'})` 

if I need to apply width:100px, height:100px and background-color:lightgreen to a <div>.

Sure, I may chain those, but changing multiple properties this way may become tedious:

d3
  .select('#test')
  .style('width','100px')
  .style('height','100px')
  .style('background-color','lightgreen')

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><div id="test"></div>

Or I may combine multiple desired properties within a class and assign that class with a .classed(), which may also overcomplicate CSS stylesheet when dynamic properties are required:

d3
  .select('#test')
  .classed('testclass', true)

.testclass {
  height: 100px;
  width: 100px;
  background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><div id="test"></div>

But those are not techniques I'm interested in.

Answer 1

The accepted answer is not correct ("there's no such syntax documented in API reference"), you can set multiple styles using d3-selection-multi. Pay attention to the fact that you have to use the method styles(), not style(). So, in your case, it would be:

.styles({width:100, height:100, 'background-color':'lightgreen'})

Here is your snippet with that change:

d3.select('#test')
  .styles({
    'width': '100px',
    'height': '100px',
    'background-color': 'lightgreen'
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="test"></div>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

As d3-selection-multiis not part of the default bundle, you'll have to reference it separately.

Answer 2

Edit (2021):

Note: I claimed (in initial version of this answer) that there's no embedded method to solve the OP's problem. And, as of D3 v6.7.0 you still cannot pass your styles as an object directly to .style() method

Two options you got by the time of this writing:

• loop through your styles object and apply the styles incrementally

const style = {"width":"100px","height":"100px","background-color":"lightgreen"}

Object.entries(style).forEach(([prop,val]) => d3.select("#test").style(prop,val))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><div id="test"></div>

• use d3-selection-multi (solution massively upvoted down this thread)

Why I would discourage you from doing the latter:

• the referenced repo is long time archived (since 2017), so it may raise all sorts of interoperability issues, which may possibly be the reason for its descending popularity
• under the hood that library does exactly the same thing (looping and applying styles incrementally)

So, whether you apply 1-line solution or add up to 13kB of legacy code to your application bundle for that sole purpose - is totally up to you.

Answer 3

Alternatively, you can use the attr() method and add the styles as part of the attribute of that particular tag being targeted:

d3.select("#test")
.attr("style", "width: 100px; height: 100px; background-color: lightgreen;")