Question

仅从D3.js开始，我正在尝试为具有许多分类级别的图表着色。以下代码旨在通过索引为i的数据集（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);

有人可以帮我准确地为变量 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，我代表该race_code的索引，我想通过i从colorExtra中提取颜色元素。例如，race_code“ A”将具有 fill 值=“＃1f77b4”，“ B”-> fill =＃aec7e8“，” C“-> 填充 =“＃ff7f0e”，依此类推。

这里的目的不是帮助我制作图形，而是更多关于通过i提取颜色代码。这样每个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

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

1 个答案: