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

Question

我已经使用d3.js.In创建了堆叠条形图，我想用不同颜色显示单个条以突出显示特定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

Answer 1

创建第二个色标，然后在您指定颜色的方法，进行检查，以确定使用哪个色阶，例如，：

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

...

.attr("fill", function (d) { 
     return d.data.year === "Dec" ? z2(d.key) : z(d.key); 
    })