d3js - d3.scale.category10() 不工作？

Question

我将d3js 添加到我的新项目中：

并做一个简单的测试以确保它有效：

d3.select(".d3div").transition()
    .duration(750)
    .style("background-color", "black");

这项工作。然而：

var colors = d3.scale.category10().domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);

这给出错误：

myd3.js:1 未捕获的类型错误：无法读取属性 'category10' 未定义

我也尝试了一些其他功能：

d3.scale.linear()

有一些错误：

myd3.js:3 Uncaught TypeError: Cannot read property 'linear' of 未定义

如果我将导入更改为

<script src="https://d3js.org/d3.v3.js"></script>

然后它适用于函数，但 transition 动画不再起作用。

我想使用最新版本。但似乎有一些我不知道的范围变化。

我该如何解决这个问题？

Answer 1

在 D3 v4.x 中不再有 d3.scale.category。

根据changelog，更改如下：

d3.scale.category10 ↦ d3.schemeCategory10
d3.scale.category20 ↦ d3.schemeCategory20
d3.scale.category20b ↦ d3.schemeCategory20b
d3.scale.category20c ↦ d3.schemeCategory20c

这些配色方案...

... 旨在与 d3.scaleOrdinal 一起使用。

所以，你必须使用 d3.scale.category10()，而不是：

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

以下是类别量表的文档：https://github.com/d3/d3-scale#schemeCategory10

PS：您不需要像这样为序数比例设置域。查看此演示：

var data = d3.range(10);

var svg = d3.select("svg");

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

var circles = svg.selectAll(".circles")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", d=>10+d*25)
	.attr("cy", 50)
	.attr("r", 10)
	.attr("fill", d=>color(d));

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

Answer 2

在d3v4中，需要使用d3.schemeCatgory：

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

Answer 3

如果有人使用 angular 2

 var colorScale=d3Scale.scaleOrdinal(d3.schemeCategory10);

这是正确的方法。