d3 如何创建不同颜色的堆栈图

Question

想要的效果是这样的：

使用d3的堆栈柱状图（stacked bar chart）来实现，但是得到的结果却是：

两个不同柱的颜色是一样的，代码可以看这里。问题就是，我要怎样才能创建出我想要的那种，每个柱的颜色不同的柱状图 ？ 谢谢啦~

Answer 1

.attr("fill", function(d){ return d.y > 6 ? "#FF0033" : "#666666"});

来自：https://stackoverflow.com/que...

Answer 2

确实如 @Randal 所说的思路，使用一个一个函数来生成fill的值，比如上面的例子，我们作如下修改，就可以实现不同柱不同颜色了：

var layer = svg.selectAll(".stack")
            .data(dataStackLayout)
            .enter().append("g")
            .attr("class", "stack")
            
            // 注释掉下面代码
            /* .style("fill", function (d, i) {
                return color(i);
            }); */

    layer.selectAll("rect")
            .data(function (d) {
                return d;
            })
            .enter().append("rect")
            .attr("x", function (d) {
                return x(d.x);
            })
            .attr("y", function (d) {
                return y(d.y + d.y0);
            })
            .attr("height", function (d) {
                return y(d.y0) - y(d.y + d.y0);
            })
            .attr("width", x.rangeBand())
            
            // 增加下面代码
            .style("fill", function (d, i, j) {  // 三个参数分别是：d 数据，i 当前rect的序号，j 当前rect 的父元素的序号
               return color((j * 2) + i);
            });