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

Question

我正在尝试使用交互式Web可视化书籍来学习d3，但是版本4.0已经发生了很多变化。我真的无法弄清楚的一件事是，是否有d3.scale.category10（）的等价物可以轻松映射到颜色。在新版本中是否存在类似的东西，或者我们是否需要使用math.random并自行编写代码？

Answer 1

而不是

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))

阅读here

参考here

工作代码here

Answer 2

直接的解决方案是在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

希望有帮助。