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

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.

javascriptcssd3.js


Solution 1:[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.

Solution 2:[2]

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;")

Solution 3:[3]

Unfortunately, there is not a better shorthand method for applying multiple styles to an element using Vanilla JavaScript. The ideal solution, in my opinion, is to apply a class to the element you wish to style that contains the multiple styles you wish to apply.

You could, of course, write a helper method that duplicates the JQuery method.

   function applyStyle(id, styles){
        Object.keys(styles).forEach(key => document.getElementById(id).setAttribute("style",key +": "+styles[key]+";"));
    }

Solution 4:[4]

Since you can access d3 node by calling .node() on needed selection, you can do smth like that:

item.node().style.cssText = `property: value; property2: value2`;

Also, if you use styled-components (react), you can simply insert your css like this:

item.node().style.cssText = PreviouslyDefinedCSS.toString();

where css is smth like this:

import { css } from "styled-components";
const PreviouslyDefinedCSS = css`
    your scss here
`;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 tinomutendaishe msakwa
Solution 3 Dean Meehan
Solution 4 Sergio Ivanuzzo

Related Questions