javascript - d3.js creating two elements per data point -

i'm wanting add rect element behind each bar, i'm struggling because d3.js isn't allowing me add element each data point.

http://jsfiddle.net/g5hpwf0m/2/

var w = parseint(d3.select(self).style("width")),     h = parseint(d3.select(self).style("height")),      svg = d3.select(self)             .append("svg")             .attr("width", w)             .attr("height", h),      yscale = d3.scale.linear()              .domain([0, d3.max(dataset)])              .range([0,h]);  svg.selectall("rect")         .data(dataset)         .enter()         .append("rect")         .attr("fill", "green")         .attr("x", function(d, i) {             return * (w / dataset.length);         })         .attr("y", function(d) {             return h - yscale(d);         })         .attr("width", w / dataset.length - barpadding)         .attr("height", function(d){return yscale(d);}); 

i've tried adding this, doesn't anything.

svg.selectall("rect")         .data(dataset)         .enter()         .append("rect")         .attr("fill", "black")         .attr("x", function(d, i) {             return * (w / dataset.length);         })         .attr("y", function(d) {             return h - yscale(d);         })         .attr("width", w / dataset.length - barpadding)         .attr("height", "100%"); 

you want create 'g' element , place rects under each respective 'g' element.

var toprects = svg.append('g').attr('class','toprect'); var bottomrects = svg.append('g').attr('class','bottomrect');  bottomrects.selectall("rect").... toprects.selectall("rect").... 

http://jsfiddle.net/ermineia/g5hpwf0m/3/