I am very new to d3, JS I need to create below DOM structure as part of assignment <svg id="svg1"> <g id= "container"> containing plot elements <g id="bars"> containing bars < g id ="x_axis"> x axis I wrote something like below code and not able to pass the test case

Any suggestions on what am I doing wrong in created required DOM structure

var svg = d3.select("body").append("svg")
.attr("id","svg1")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);

var g = svg.append("g")
.attr("id","container")
.attr("transform","translate(" + margin.left + "," + margin.top + ")")

var bars = g.append("bar")
.attr("id","bars")
.attr("transform","translate(" + margin.left + "," + margin.top + ")");


g.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("id","rects")
.attr("class", "bar")
.style("fill", function(d){ return d.tot})
.attr("x", function(d) { return x(d.Year); })
.attr("y", function(d) { return y(d.tot); })
.attr("width", (wi`enter code here`dth/dataset.length)*0.5-0.4)
.attr("height", function(d) { return height - y(d.tot); });
`