D3js - d3.scale.category10 () not working?

Question

I will add d3jsto my new project:

and do a simple test to make sure it works:

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

this job. However:

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

this gives an error:

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

and I also try another function:

d3.scale.linear()

have some errors:

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

if I changed the import to

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

then it works for functions, but the animation transitionno longer works.

I want to use the latest version. but it seems that there are changes in the area of ​​which I do not know.

How can i solve this?

Answer 1

d3.scale.category D3 v4.x.

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>

Hide result

Answer 2

d3v4 d3.schemeCatgory:

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

Answer 3

- angular 2

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

.