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未捕获的TypeError:无法读取未定义的属性'category10'

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

d3.scale.linear()

有一些错误:

myd3.js:3未捕获的TypeError:无法读取未定义的属性'linear'

如果我将导入更改为

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

然后它适用于函数,但transition动画不再工作.

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

我该如何解决这个问题？

Answer 1

d3.scale.categoryD3 v4.x中没有更多内容.

根据更改日志,以下是更改:

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>