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：无法读取属性＆＃39; category10＆＃39;的未定义

我也尝试了其他功能：

d3.scale.linear()

有一些错误：

myd3.js：3未捕获的TypeError：无法读取属性＆＃39; linear＆＃39;的未定义

如果我将导入更改为

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

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

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

PS：你不需要为这样的序数量级设置域名。查看此演示：

＆＃13;

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

＆＃13;

https://developer.android.com/training/location/geofencing.html

＆＃13;

Answer 2

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

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

Answer 3

如果有人使用角度2

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

这是正确的方法。

d3js - d3.scale.category10（）不工作？

3 个答案: