rect3

by Laurie Skelly

HTML

<div id="svg_container"></div>

CSS

#svg_container {
    margin:10px;
}
svg {
    border: 1px solid gray;
}
g rect{
    fill: none;
    stroke: violet;
}
g.one rect{
  fill: turquoise;
}
g.two rect{
  fill: teal;
}

JavaScript

h = 400;
w = 500;

var svg = 
  d3.select("#svg_container")
    .append("svg")
    .attr("id","svg")
    .attr('height',h)
    .attr('width',w);
    
svg.append('g')
.attr('class','one')

svg.append('g')
.attr('class','two')
.attr('transform','translate(100,-50)')

gs = d3.selectAll('g')
console.log(gs)

gs.append('rect')
	.attr('x',w/2-25)
	.attr('y',h-120)
	.attr('height',100)
	.attr('width',50)
  .style('fill','yellow');