D3js: multiple charts in a svg container

Question

I am trying to draw multiple little bar charts in one svg container using reusable chart. I call the reusable chart for each line of array. The reusable chart draws the chart and translates it to the specified position in the svg container. The problem is that the svg container over writes itself every time reusable chart is called and thus, just displays the last instance of the array elements. I think there is some problem with this svg selection bit, but couldn't fix it.

// If no SVG exists, create one - and add key groups:
        if (!svg) {
            svg = d3.select(this)
                 .append("svg")
                 .classed("chart", true);
            var container = svg.append("g").classed("container-group", true);
            container.append("g").classed("chart-group", true);
        }

    // Transition the width and height of the main SVG and the key 'g' group: 
        svg.transition().attr({width: width, height: height});
        svg.select(".container-group")
            .attr({transform: "translate(" + 100*_data.row + "," + 100*_data.col + ")"});

I have attached the fiddle here

This is what I am trying to replicate:

Each page would have several such charts, therefore, I wanted one div for each chart.

Answer 1

There were two things that required major changes:

1) Create a new g element for each instance of the function call.

2) When drawing bars for the chart, the bar should selectAll chart groups created, rather than just selecting the same chart every time.

The working fiddle is here