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

Question

当我迈出 d3.js 的第一步时，我不禁注意到它的方法与 jQuery 非常相似。

我的问题是：

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

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

如果我需要申请width:100px、height:100px 和 background-color:lightgreen 到 <div>。

当然，我可以将它们链接起来，但是以这种方式更改多个属性可能会变得乏味：

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>

或者我可以在一个类中组合多个所需的属性，并为该类分配一个.classed()，这也可能在需要动态属性时使 CSS 样式表过于复杂：

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>

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

Answer 1

编辑（2021）：

注意：我声称（在此答案的初始版本中）没有解决 OP 问题的嵌入式方法。而且，从 D3 v6.7.0 开始，您仍然不能将样式作为对象直接传递给 .style() 方法

在撰写本文时您有两个选择：

• 遍历您的样式对象并逐步应用样式

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>

• 使用d3-selection-multi（解决方案在此线程中大量支持）

为什么我不鼓励你做后者：

• 引用的 repo 已长期存档（自 2017 年以来），因此可能会引发各种互操作性问题，这可能是其descending popularity 的原因
• 在库 does exactly the same thing 的底层（循环和逐步应用样式）

因此，您是应用单行解决方案还是将旧代码 up to 13kB 添加到您的应用程序包中，完全取决于您。

Answer 2

由于您可以通过在需要的选择上调用.node() 来访问 d3 节点，因此您可以这样做：

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

另外，如果你使用 styled-components (react)，你可以像这样简单地插入你的 css：

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

css 是这样的：

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

Answer 3

accepted answer 不正确（“API 参考中没有记录此类语法”），您可以使用 d3-selection-multi 设置多种样式。请注意，您必须使用方法styles()，而不是style()。所以，在你的情况下，它会是：

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

这是您的 sn-p 更改：

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>

由于d3-selection-multi不是默认捆绑包的一部分，您必须单独引用它。

Answer 4

不幸的是，没有更好的速记方法来使用 Vanilla JavaScript 将多种样式应用于元素。在我看来，理想的解决方案是将一个类应用于您希望设置样式的元素，其中包含您希望应用的多种样式。

当然，您可以编写一个复制 JQuery 方法的辅助方法。

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