获取schemeCategory10的红色

Question

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

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

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

我怎样才能变成红色而不是橙色？它是如何工作的？

Answer 1

在序数级别中，如果您未明确设置域，则将根据您传递的值推断域。 API对此非常明确：

  

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

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

var colours = d3.scaleOrdinal(d3.schemeCategory10)
  .domain(["foo", "bar", "baz", "foobar"]);

d3.select("p").style("color", colours("foobar"))

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<p>This was a black text... now it is red.</p>

＆＃13;

＆＃13;

＆＃13;

PS ：你应该总是得到＆＃34;蓝色＆＃34; （这是第一种颜色），而不是＆＃34;橙色＆＃34;。这意味着你已经在代码中的其他地方使用了比例...然后，当你再次使用它时，你会得到＆＃34; orange＆＃34; （第二种颜色）。您正在使用1这一事实，这是＆＃34; orange＆＃34;的索引。 （第二种颜色），没有区别。看看：

＆＃13;

＆＃13;

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

d3.select("p").style("color", colours(1))

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我一直在各种 JavaScript 项目中使用来自 d3 配色方案的颜色，您可以访问颜色值而无需担心比例等，因为每个 d3 配色方案只是一个数组。

例如，您可以将d3.schemeCategory10的内容打印到控制台，以查看数组的内容：

console.table(d3.schemeCategory10);

你可以通过简单的方式获得红色：

let red = d3.schemeCategory10[3];