Javascript D3堆叠条形图，每个堆叠由不同的组设置不同的颜色，

问题

我试图在D3（v5）中获得一个堆叠条形图，以便为不同的组（我可以这样做，图1）提供单独的彩色条形图，每个堆叠具有不同的颜色（取决于图2）

我找不到一种方法来获得图3中的堆栈着色（即，我希望组颜色的不同深浅随堆栈高度的不同而变化）示例（除非我希望不同的组具有不同的颜色，即不重复它们在这里）

在我提供的代码示例中，有两组数据。一个简单的集合，用于帮助处理数据：

Animal,Group,A,B,C,D
Dog,Domestic,10,10,20,5
Cat,Domestic,20,5,10,10
Mouse,Pest,75,5,35,0 
Lion,Africa,5,5,30,25
Elephant,Africa,15,15,20,20
Whale,Marine,35,20,10,45
Shark,Marine,45,55,0, 60
Fish,Marine,20, 5,30,10

而我实际上正试图使用它。 以下是我正在尝试开发的代码：

//设置图形的尺寸和边距
常量边距={
排名：90，
右:20,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=960-margin.top-margin.bottom；
const svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
常量y=d3.scaleBand（）
.范围（[0，高度]）
.填充（0.1）；
常数x=d3.scaleLinear（）
.范围（[0，宽度]）；
常数z=d3.scaleOrdinal（）
.范围（[“无”、“浅钢蓝”、“钢蓝”、“深铁蓝”]）；
d3.csv（“https://gist.githubusercontent.com/JimMaltby/844ca313589e488b249b86ead0d621a9/raw/f328ad6291ffd3c9767a2dbdba5ce8ade59a5dfa/TimeBarDummyFormat.csv，d3.自动键入，（d，i，列）=>{
var i=3；
var t=0；
对于（；i我在X轴上显示它们
常量组=d3.map（数据，d=>d.Group）；
y、 域（data.map（d=>d.Ser））；
x、 域（[2000，d3.max（数据，d=>d.total）]）.nice（）；
z、 域（密钥）；
svg.append（“g”）
.全选（“g”）
.data（d3.stack（）.key（key）（数据））
.enter（）.append（“g”）
.attr（“fill”，d=>z（d.key））//此处指定了颜色，因为您希望序列中的每个人都是相同的颜色
.selectAll（“rect”）
.数据（d=>d）
.输入（）
.append（“rect”）
.attr（“y”，d=>y（d.data.Ser））
.attr（“x”，d=>x（d[0]））
.attr（“高度”，y.带宽（））
.attr（“宽度”，d=>x（d[1]）-x（d[0]）；
svg.append（“g”）
.attr（“转换”、“转换（0,0）”）
.call（d3.axisTop（x））；
svg.append（“g”）
.调用（d3.左（y））；
});
.bar{
填充：rgb（70、131、180）；
}
如果您想稍微改变条形图的颜色，如果条形图的长度较小，您可以使用
填充不透明度
，并保持
填充
不变！这样，如果该值较轻，则颜色较不明显且较轻

只需创建一个范围为
[0.3,1]
的新比例
不透明度
。我选择了0.3，因为0不透明度意味着该条是不可见的，而您通常不希望这样。我添加了一个单独的值
d.height
，以表示条形图的整个可见高度，该高度与起始高度分开（但相当于
d.Min+d.All+d.Max
）。现在，只需将该属性应用于每个条，就完成了

您可以选择将范围设置为
[0,1]
，而不在域中使用
d3.extent
——这可能会导致类似的结果，尽管存在一些差异，您可以通过思考实验发现

现在，每个条上都设置了
填充不透明度
属性。因此，同一堆栈中的条具有相同的
fill opacity
值。但请注意，这是完全可选的，您也可以应用不同的值


//设置图形的尺寸和边距
常量边距={
排名：90，
右:20,，
底数：30，
左：40
},
宽度=960-margin.left-margin.right，
高度=960-margin.top-margin.bottom；
const svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
常量y=d3.scaleBand（）
.范围（[0，高度]）
.填充（0.1）；
常数x=d3.scaleLinear（）
.范围（[0，宽度]）；
常数z=d3.scaleOrdinal（）
.范围（[“无”、“浅钢蓝”、“钢蓝”、“深铁蓝”]）；
常数不透明度=d3.scaleLinear（）
.范围（[0.3,1]）；
d3.csv（“https://gist.githubusercontent.com/JimMaltby/844ca313589e488b249b86ead0d621a9/raw/f328ad6291ffd3c9767a2dbdba5ce8ade59a5dfa/TimeBarDummyFormat.csv，d3.自动键入，（d，i，列）=>{
var i=3；
var t=0；
对于（；i我在X轴上显示它们
常量组=d3.map（数据，d=>d.Group）；
y、 域（data.map（d=>d.Ser））；
x、 域（[2000，d3.max（数据，d=>d.total）]）.nice（）；
z、 域（密钥）；
域（d3.extent（数据，d=>d.height））；
console.log（opacity.domain（））；
svg.append（“g”）
.全选（“g”）
.data（d3.stack（）.key（key）（数据））
.enter（）.append（“g”）
.attr（“填充”，d=>z（d键））
.selectAll（“rect”）
.数据（d=>d）
.输入（）
.append（“rect”）
.attr（“y”，d