当我开始使用 d3.js 时,我不禁注意到它的方法与 jQuery 非常相似。
我的问题是:
当我需要修改
style匹配元素属性的多个 CSS 属性时,是否有一种速记方法,例如 jQuery 或 ReactJS 提供,例如Run Code Online (Sandbox Code Playgroud).style({width:100, height:100, backgroundColor:'lightgreen'})`如果我需要申请
width:100px,height:100px并background-color:lightgreen到<div>。
当然,我可以将这些链接起来,但是以这种方式更改多个属性可能会变得乏味:
.style({width:100, height:100, backgroundColor:'lightgreen'})`
Run Code Online (Sandbox Code Playgroud)
d3
.select('#test')
.style('width','100px')
.style('height','100px')
.style('background-color','lightgreen')Run Code Online (Sandbox Code Playgroud)
或者我可以在一个类中组合多个所需的属性,并为该类分配一个.classed(),这也可能在需要动态属性时使 CSS 样式表过于复杂:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><div id="test"></div>Run Code Online (Sandbox Code Playgroud)
d3
.select('#test')
.classed('testclass', true)Run Code Online (Sandbox Code Playgroud)
.testclass {
height: 100px;
width: 100px;
background-color: lightgreen;
}Run Code Online (Sandbox Code Playgroud)
但这些都不是我感兴趣的技术。