d3.selectAll 在 v4 中按类更改样式答案

【问题标题】：d3.selectAll to change styles by class in v4d3.selectAll 在 v4 中按类更改样式
【发布时间】：2016-08-10 20:06:04
【问题描述】：

我正在从 d3 v3 过渡到 d3 v4。我查看了有关更改内容的文档，并且我知道样式和选择器现在的工作方式略有不同。我在寻找正确的方法来完成我需要做的事情时遇到问题。

在 v3 中我可以这样做：

d3.selectAll(".myRectangle").style({'fill':'rgb(255,100,100)', 'stroke':'#000', 'stroke-width':'0.3'});

在我的代码底部，所有已绘制的被归类为“myRectangle”的东西都会应用指定的样式。

此外，它还可以充当占位符，以防任何动态将 myRectangle 类添加到其中（比如鼠标悬停）。

现在，相同的代码不仅不应用样式，而且如果不存在具有指定类的元素，它会返回错误。

我无法找到如何正确实现这一点的示例，这可能意味着我一直做得很糟糕。这里有人能指出我正确的方向吗？

【问题讨论】：

【解决方案1】：

在 d3.js v4 中，attr 和 style 只接受一个属性/值对作为参数：

d3.selectAll('.myRectangle').style('fill', 'rgb(255,100,100)')

为了传递具有多个值的对象，您必须使用attrs 和styles 而不是attr 和style，并且还要在您的网页中包含https://d3js.org/d3-selection-multi.v0.4.min.js 文件。

或者，您可以链接多个attr，每个属性一个。 style 同上。

【讨论】：

感谢您的快速回复，Eggy。我正在使用用于 v4 的 megalib，但为了确定，也向页面添加了 selection-multi。我收到“未捕获的 TypeError：d3.selectAll(...).styles 不是函数”。我能够用你给我的东西解决我的一些问题，所以至少谢谢你。
我唯一能弄清楚的是你嵌入 d3 模块的顺序：d3-selection-multi.v0.4.min.js 必须出现在 d3.v4.min.js 之后。
我在本地下载了 d3-selection-multi，它工作得很好。一定是我公司防火墙的网络问题。非常感谢！

【解决方案2】：

另一篇文章是正确的，您一次只能为一件事设置一个属性或样式。但是“style”是一个属性，它接受单个字符串！

d3.selectAll('.myRectangle').attr("style", "fill:rgb(255,100,100);stroke:#000;stroke-width:0.3;")

【讨论】：

尽管这不是 OP 所要求的，但您的回答确实是一个很好的建议：OP 可以通过传递包含所有样式的单个字符串轻松避免使用 d3-selection-multi。欢迎来到 StackOverflow。