获得红色的schemeCategory10

Question

我想要获得的红色（或任何颜色）schemeCategory10。我尝试了这个：

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

但是，当我将数字更改为功能颜色时，总是得到相同的颜色（橙色）。

如何获得红色而不是橙色？它是如何工作的？

Answer 1

在序数范围内，如果您未明确设置域，则将从您传递的值中推断出域。该API是对此非常清楚：

如果未知值是隐式的（默认），则按序数范围设置域是可选的。在这种情况下，将通过为传递给刻度的每个唯一值分配范围内的新值，从使用中隐式推断出域。

因此，如果您未设置域，则比例尺将以先到先得的方式返回值。

现在，让我们看一下d3.schemeCategory10：

如您所见，红色是第四种颜色。所以，要获得红色...

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>

...我们必须设置我们的域（这是最重要的部分），然后，我们只需要传递该域中的第四项即可。这是另一个演示：

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 was a black text... now it is red.</p>

PS：您应该总是得到“蓝色”（这是第一颜色），而不是“橙色”。这意味着您已经在代码中的其他地方使用了标尺...然后，再次使用它时，将得到“橙色”（第二种颜色）。您正在使用的事实1，这是“橙色”（第二种颜色）的索引，没有区别。看一看：

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 be orange, but in fact it is blue.</p>