獲取schemeCategory10的紅顏色

Question

我試圖獲得schemeCategory10的紅色（或任何顏色）。 我嘗試這樣做：

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

但我總是得到相同的顏色（橙色）當我改變成數函數的顏色。

我該如何獲得紅色而不是橙色？它是如何工作的？

Answer 1

按順序級別，如果不明確設置域，則將根據您傳遞的值推斷域。 API對此很清楚：

如果未知值是隱式（默認值），則按順序設置域是可選的。在這種情況下，通過將每個傳遞給該比例的唯一值分配給該範圍中的新值，可以從使用中隱含地推斷該域。

因此，如果您未設置域，則比例將以先到先得的方式返回值。

現在，讓我們來看看d3.schemeCategory10：

正如你所看到的，紅色是第四顏色。因此，要獲得紅...

var colours = d3.scaleOrdinal(d3.schemeCategory10) 
 
\t .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>