javascript - 传递要存储在变量中的数组元素

Question

刚开始使用 D3.js，我尝试为具有许多分类级别的图表着色。 以下代码旨在通过索引 i 的 dataset(d) 提取 colorExtra 元素(20 个颜色代码元素)，并将其存储在变量 fill 中。然而，下面的代码并没有将 colorExtra 的颜色代码存储在 fill 中。

   var colorExtra = d3.schemeCategory20; //add
   console.log(colorExtra);
   var fill = function (d, i) { return colorExtra[i]}; //add
   console.log(fill);

有人可以帮我准确地编写变量填充的代码吗？

需要明确的是，colorExtra中有20个颜色代码元素:

["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", 
"#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", 
"#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"]

我有一个变量race，具有以下race_code级别，并且我正在尝试制作一个饼图，其中所有可用级别都以不同的颜色显示。在代码中，d代表race_code，i代表race_code的索引，我想通过i从colorExtra中提取颜色元素。例如，race_code "A"将具有 fill 值 = "#1f77b4", "B"-> fill = #aec7e8", "C"-> 填充 =“#ff7f0e”等等..

这里的目的不是帮助我制作图表，而是更多地帮助我提取颜色代码。这样每个race_code都有自己的颜色。

这是我的完整代码:https://bl.ocks.org/lydiawawa/38243015ab2ac96b6086d3bae56572b9/40326b1fb9b0b2db89d3d7601c824d18f97a5e95

Answer 1

正如我在 comments 中简要解释的那样我不确定您使用那个繁琐的 color 函数的目标是什么。既然你说你是 D3 的新手，这里有一个建议:不要这样做，这不是惯用的 D3。摆脱那个可怕的功能，为每个类别创建一个序数尺度，鲍勃就是你的叔叔。

但是，解决您的特定功能并尝试以最小的更改修复您现在拥有的代码，您必须将每个元素的索引传递给 color...

.style("fill", function(d, i) { return color(d.data[key], i);})

...然后，使用该索引，您可以获取 d3.schemeCategory20 数组内的颜色:

var fill = colorExtra[i];

这是您更新的 bl.ocks:https://bl.ocks.org/GerardoFurtado/539c94a544d09045cef50fafd83548f8/fd3336588c4098d7143865277d60ae0276ed04cd