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.

回答1:

To the best of my knowledge, there's no such syntax documented in API reference.

If you need to use an object as a style source, you may try following workaround, though (based on .forEach() looping over Object.entries()):

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>

But I'm not quite sure about performance here.

回答2:

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.

回答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]+";"));
    }

来源：https://stackoverflow.com/questions/59454162/apply-multiple-styles-with-style-method-in-d3-js

标签

javascript

css

d3.js