小编RKu*_*mar的帖子

在 D3.js 中使用 .style() 方法应用多种样式

当我开始使用 d3.js 时,我不禁注意到它的方法与 jQuery 非常相似。

我的问题是:

当我需要修改style匹配元素属性的多个 CSS 属性时,是否有一种速记方法,例如 jQuery 或 ReactJS 提供,例如

.style({width:100, height:100, backgroundColor:'lightgreen'})` 
Run Code Online (Sandbox Code Playgroud)

如果我需要申请width:100pxheight:100pxbackground-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)

但这些都不是我感兴趣的技术。

javascript css d3.js

6
推荐指数
2
解决办法
1955
查看次数

标签 统计

css ×1

d3.js ×1

javascript ×1