Javascript d3.js-在堆叠条形图中向一个条形图添加不同颜色

我使用d3.js创建了堆叠条形图，我想用不同的颜色显示一个条形图，以突出显示特定x轴值的数据，如下所示

我用来绘制堆叠图表的脚本如下：

// Set the dimensions of the canvas / graph
var svg = d3.select("#svgID"),
    margin = {top: 80, right: 140, bottom: 100, left: 100},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var padding = -100;
//set the ranges
var x = d3.scaleBand()
    .rangeRound([0, width])
    .paddingInner(0.20)
    .align(0.1);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
    .range(["#008000", "#C00000", "#404040", "#4d4d4d"]);    

var data = $("#svgID").data("values");

var keys = ["Pass", "Fail", "Average", "Worst"];

var legendKeysbar = ["Pass", "Fail", "Average", "Worst"];
var legendColorsbar = d3.scaleOrdinal()
    .range(["#008000", "#C00000", "#404040", "#4d4d4d"]);

// Scale the range of the data
x.domain(data.map(function (d) {
    return d.year;
}));
y.domain([0, d3.max(data, function (d) {
    return d.total;
})]).nice();
z.domain(keys);

// add the Y gridlines
g.append("g").selectAll(".hline").data(y.ticks(10)).enter()
    .append("svg:line")
    .attr("x1", 0)
    .attr("y1", function(d){ return y(d);})
    .attr("x2", width)
    .attr("y2", function(d){ return y(d);})
    .style("stroke", "white")
    .style("stroke-width", 1);    

// append the rectangles for the bar chart
g.append("g")
    .selectAll("g")
    .data(d3.stack().keys(keys)(data))
    .enter().append("g")
    .attr("fill", function (d) {
        return z(d.key);
    })
    .selectAll("rect")
    .data(function (d) {
        return d;
    })
    .enter().append("rect")
    .attr("x", function (d) {
        return x(d.data.year);
    })
    .attr("y", function (d) {
        return y(d[1]);
    })
    .attr("height", function (d) {
        return y(d[0]) - y(d[1]);
    })

---

你能帮我更新单条的颜色吗？是否可以通过d3.js创建第二个色阶，然后在指定颜色的方法中，执行检查以确定要使用的色阶，例如：

var z2 = d3.scaleOrdinal().range(<your color array here>)

---

创建第二个颜色比例，然后在指定颜色的方法中，执行检查以确定要使用的颜色比例，例如：

var z2 = d3.scaleOrdinal().range(<your color array here>)

---

如果你发布了一个活生生的例子，比如一个JSFIDLE，说明了什么不起作用，有人可能会进一步帮助你。如果你发布了一个活生生的例子，比如一个JSFIDLE，说明了什么不起作用，有人可能会进一步帮助你。你找到答案了吗？你找到答案了吗？