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:

enter image description here

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

Your jsfiddle doesn't work for me. Conceptually, I would append a new g element for each chart. — Lars Kotthoff
@LarsKotthoff I don't know why my code isn't working on fiddle, its working on my machine. Do u mean a new g element for each chart-group ? — user2398101
@LarsKotthoff How would i do that?? I have managed to create a new container for each chart, but still same thing happens, just the chart for last iteration shows up :( — user2398101

user2398101 user2398101 · Accepted Answer · 2014-04-26T15:41:18

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

D3js: multiple charts in a svg container

1 Answers