[英]Changing the colors of each of the Stacked Bar chart with different Color in D3
这涉及为堆叠的条形图的每个条形分配不同的颜色,因为当前所有四个条形图中只有一种颜色,并且堆叠的一个条形中的颜色正在变化,但是我也尝试为所有四个条形图分配不同的颜色累计值。
这是代码
var margin = {
top: 20,
right: 160,
bottom: 35,
left: 30
};
var width = 960 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* Data in strings like it would be if imported from a csv */
var data = [{
year: "A",
redDelicious: "10",
mcintosh: "5",
oranges: "19"
}, {
year: "B",
redDelicious: "12",
mcintosh: "0",
oranges: "15"
}, {
year: "C",
redDelicious: "05",
mcintosh: "0",
oranges: "28"
}, {
year: "D",
redDelicious: "14",
mcintosh: "0",
oranges: "12"
},
];
$("#btn").on("click", function(){
d3.selectAll("svg > g > g").remove();
data[1].mcintosh = (Number(data[1].mcintosh) + 1).toString();
console.log(1,data);
update();
});
update();
function update(){
var orangeData = data.map(function(d) {
return {
year: d.year,
oranges: +d.oranges
}
});
console.log(orangeData)
// Transpose the data into layers
var dataset = d3.layout.stack()(["redDelicious", "mcintosh"].map(function(skillset) {
return data.map(function(d) {
return {
x: d.year,
y: +d[skillset]
};
});
}));
console.log(dataset)
// Set x, y and colors
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) {
return d.x;
}))
.rangeRoundBands([10, width - 10], 0.02);
var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})])
.range([height, 0]);
var colors = ["#b33040", "#d9d574"];
var backcolors = ["red", "blue","green","pink"];
// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width, 0, 0)
.tickFormat(function(d) {
return d
});
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
// .tickFormat(d3.time.format("%Y"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Creating the Average Bar for the Semester
svg.selectAll(".bar1").data(orangeData).enter().append("g")
.attr("class", "bar1").append("rect")
.attr("x", function(d) {
return x(d.year) ; // center it
})
.attr("width", x.rangeBand()) // make it slimmer
.attr("y", function(d) {
return y(d.oranges);
})
.attr("height", function(d) {
return height - y(d.oranges);
});
// Create groups for each series, rects for each segment in Stacked Bar
var groups = svg.selectAll("g.cost")
.data(dataset)
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) {
return colors[i];
});
var rect = groups.selectAll("rect")
.data(function(d) {
return d;
})
.enter()
.append("rect")
.attr("x", function(d) {
return x(d.x) + 20 ;
})
.attr("y", function(d) {
return y(d.y0 + d.y);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y0 + d.y);
})
.attr("width", x.rangeBand() -40 );
}
这是工作的小提琴
首先,设置颜色数组:
var colors = ['#7fc97f','#beaed4','#fdc086','#ffff99','#386cb0','#f0027f','#bf5b17','#666666'];
然后,在矩形(而不是组)中,使用父级的索引设置每个条形的填充:
.attr("fill", function(d, i, j) {
return colors[(j*4)+i];
});
在此,魔术数字“ 4”是组数。 相应地更改它(如果创建更多的条形)。
这是您的小提琴: https : //fiddle.jshell.net/747beqqc/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.