d3.scale.category10（）的d3.js v4.0是什么？

我正在尝试使用“交互式Web可视化”书学习d3，但是4.0版已经发生了很多变化。我真的不知道的一件事是，是否有d3.scale.category10（）的等效项可以轻松映射到颜色。在新版本中是否存在类似的内容，还是我们需要使用math.random自己编写一些内容？

d3.js

— ony
source

Answers:

143

代替

d3.scale.category10()

使用

d3.scaleOrdinal(d3.schemeCategory10);

创建一个这样的色标：

var color = d3.scaleOrdinal(d3.schemeCategory10);

在V3中的代码中使用如下颜色：

svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", color(3))

读在这里

这里参考

这里的工作代码

— 西里尔·谢里安（Cyril Cherian）
source

谢谢！我只是在浏览变更文档，最后找到了解释。

— anonygrits

无论您提供给什么数字color()，在您的工作代码中，输出始终是蓝色和橙色-这是预期的行为吗？如果我要紫色怎么办？

— dbj44

这似乎是我所期望的一种解决方案：color = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(0, 9));

— dbj44

`在您的工作代码中，输出始终是蓝色和橙色-是预期的行为吗？`没错，

— 西里尔·

一个简单的解决方案是在d3.js的版本4中使用以下色标：

var colorScale_1 = d3.schemeCategory10;
var colorScale_2 = schemeCategory20;
var colorScale_3 = d3.schemeCategory20b;
var colorScale_4 = d3.schemeCategory20c;

colorScale_1，colorScale_2，colorScale_3，colorScale_4是不同颜色的数组。因此，您可以使用它们的不同索引来填充形状。例如

svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", 100)
.attr("height", 100)
.style("fill", colorScale_1[2])

供参考，请看这里： http //bl.ocks.org/emmasaunders/f4902478bcfa411c77a412c02087bed4

希望能有所帮助。

— Shwetabharti
source