d3js - d3.scale.category10（）不工作？ [英] d3js - d3.scale.category10() not working?

问题描述

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

I add d3js to my new project:

并执行简单测试只是为了确保它有效：

and do a simple test just to make sure it works:

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'

myd3.js:1 Uncaught TypeError: Cannot read property 'category10' of undefined

和我尝试其他一些功能：

and I try some other function too:

d3.scale.linear()

有一些错误：

myd3.js：3未捕获的TypeError：无法读取
undefined属性'linear'

myd3.js:3 Uncaught TypeError: Cannot read property 'linear' of undefined

如果我将导入更改为

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

然后它适用于函数，但转换动画不再工作。

then it works for the functions, but the transition animation not working anymore.

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

I want to use the latest version. but it seems like there are scope changes that I am not aware of.

我该如何解决这个问题？

How can I resolve this?

推荐答案

已经没有了D3 v4.x中的 d3.scale.category 。

There is no more d3.scale.category in D3 v4.x.

根据更改日志，以下是更改：

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

这些颜色方案......

These are color schemes that...

...设计用于d3 .scaleOrdinal。

... are designed to work with d3.scaleOrdinal.

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

So, instead of d3.scale.category10(), you'll have to use:

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

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

Here is the documentation for the category scales: https://github.com/d3/d3-scale#schemeCategory10

PS ：您不需要像这样设置序数规模的域。检查此演示：

PS: You don't need to set the domain for an ordinal scale like this. Check this demo:

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>

这篇关于d3js - d3.scale.category10（）不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！