Question

我正在创建一个分组的条形图并尝试为其创建色阶。

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

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

Answer 1

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

一种解决方案是设置两个尺度......

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

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

1 个答案: