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

Question

I add d3js to my new project:

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

d3.select(\".d3div\").transition()
    .duration(750)
          


        

Answer 1

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

According to the changelog, here are the changes:

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...

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

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

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

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

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>

Answer 2

In d3v4, you need to use d3.schemeCatgory:

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

Answer 3

if someone using angular 2

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

this is the correct way.