is it possible to color groups differently - d3.js

Question

I am planning to have different colors for each element in the .I was just exploring if this is possible.
My code:
var svg = d3.select("#graphid").append("svg")
.style("margin-left","30px")
//.style("background-color","lavender")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var focus = svg.append("g")
.attr("class", "focus")
.attr("id","focusid")
.style("background-color","#F8FCFB")
//.call(zoom)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var fo= d3.select("#focusid").style("background-color","azure");
console.log(fo);
var context = svg.append("g")
.attr("id","contextid")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
var contx= d3.select("#contextid").style("background-color","lavender");
............../
..............//
.............///
the groups were not getting the colors set? What am i missing here?

Answer 1

To solve this you need to append a 'rect' to you SVG and fill that as you can't just fill a 'g'. So create a rectangle then append the focus to that rectangle. same with context :)
//create the rectangle to fill here
var rect = svg.append('rect')
.attr('id', 'rect')
.style('fill', 'red')
.attr("height", height)
.attr("width", width);
var focus = svg.append("g")
.attr("class", "focus")
.attr("id","focusid")
//.call(zoom)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
Ive done it for focus, leave it up to you to do context :)
Updated fiddle : http://fiddle.jshell.net/zua7L31d/6/
Finished both them off :
Added a new rectangle for the 'context'
var contextRect = svg.append('rect')
.attr('id', 'rect2')
//.style('fill', 'red')
.attr("height", rect2Height)
.attr("width", rect1Width)
.attr('x', 0)
.attr('y', rect1Height)
;
Final fiddle : http://fiddle.jshell.net/zua7L31d/7/
Hope that helped :)