javascript - Get red color of schemeCategory10 -

i'm tying red color (or color) of schemecategory10. tried this:

var colors = d3.scaleordinal(d3.schemecategory10); colors(1); 

but same color (orange) when change number function colors.

how can red instead of orange ? how work?

in ordinal scale, if don't set domain explicitly, domain inferred values pass. api clear regarding this:

setting domain on ordinal scale optional if unknown value implicit (the default). in case, domain inferred implicitly usage assigning each unique value passed scale new value range.

therefore, if don't set domain, scale return values in first-come, first-served basis.

now, let's have @ d3.schemecategory10:

as can see, red forth colour. so, red...

var colours = d3.scaleordinal(d3.schemecategory10)  	.domain(["foo", "bar", "baz", "foobar"]);      console.log(colours("foobar"))

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

... have set our domain (this important part) and, after that, have pass fourth item in domain. here demo:

var colours = d3.scaleordinal(d3.schemecategory10)    .domain(["foo", "bar", "baz", "foobar"]);    d3.select("p").style("color", colours("foobar"))

<script src="https://d3js.org/d3.v4.min.js"></script>  <p>this black text... red.</p>

ps: should "blue" (which first colour), not "orange". means used scale somewhere else in code... then, when use again, "orange" (the second colour). fact you're using 1, index of "orange" (the second colour), makes no difference. have look:

var colours = d3.scaleordinal(d3.schemecategory10);    d3.select("p").style("color", colours(1))

<script src="https://d3js.org/d3.v4.min.js"></script>  <p>this text should orange, in fact blue.</p>