将分类数据的配色方案与线性范围相结合

Question

我正在创建分组条形图并尝试为其创建色标。

我在这里看到 coloring with a scale 的示例。但是假设组中的条可以隐式包含在更小的组中，并且应该有自己的线性色标。

假设我想在示例中将一组中的前 3 个条链接到一个线性（蓝色）色标上，将最后 4 个条链接到不同的线性（红色）色标上。我该怎么做？

Answer 1

这是一个临时答案，针对您链接的示例。

一个解决方案是设置两个比例...

var scale1 = d3.scaleLinear()
    .range(["lightblue", "darkblue"])
    .domain([0, 2]);

var scale2 = d3.scaleLinear()
    .range(["red", "darkred"])
    .domain([3, 6]);

...并使用索引选择要使用的索引：

.attr("fill", function(d,i) { return i < 3 ? scale1(i) : scale2(i)});

请注意，我正在使用域来匹配条形图：

.domain([0, 2])//goes from the first to the third bar
.domain([3, 6])//goes from the forth to the seventh bar

这是更新后的 bl.ocks：https://bl.ocks.org/anonymous/5ba7ad96872b4b5bbc2d212b2ca6e9d0/20e1ed6bb00484f736eab4cad8c221e83bea63d2

将分类数据的配色方案与线性范围相结合

Combining color schemes for categorical data with linear ranges

javascript

d3.js

colorbrewer