How to append element after grouping my circles in D3?

Question

I have a bunch of circles. I first visualize the circles as following:

circle = svg.selectAll('circle')
        .data(csv)
        .enter()
        .append("circle")
        .attr("stroke", "black")
        .attr("id", function(d,i){return "id_" + i.toString();})
        .attr("class", function(d){return "Color_" + d.Cyl;})
        .attr("fill", function(d) {return color(d.Cyl);})
        .attr("cx", function(d) { return Scale.xScale(d.Weight); })
        .attr("cy", function(d) { return Scale.yScale(d.DealerCost); })
        .attr("r", r)
        .call(drag);

Then at some point in my code I use nest() function to group these circles based on a particular key.

var data = d3.nest()
                  .key(function(d) { return d.Cyl;})
                  .rollup(function(d) { 
                  return d3.sum(d, function(g) {return Number(g.value); });
    }).entries(csv);

And then update the position of the circles using following code

 for(j=0; j<data.length;j++)
    {
            svg        
                .selectAll(".Color_" + data[j].key)
                .transition()
                .delay(function(d,i) { return 100; })
                .duration(1000)
                .ease("linear")
                .attr("cx", function(d,i) { return Scale.xScale(data[j].key+ " Cylinder")+ (i%val)*r*2;})    
                .attr("cy", function(d,i) { return StachChartHeight - (Math.floor(i/val))*r*2;})
    }

I am trying to add each category of circles to the "g" element using following code but it does not work. In fact I need to have 3 different "g" tags which each contains a group of circles.

 for(j=0; j<data.length;j++)
    {
            svg 
                .append("g") // this is what I added       
                .selectAll(".Color_" + data[j].key)
                .transition()
                .delay(function(d,i) { return 100; })
                .duration(1000)
                .ease("linear")
                .attr("cx", function(d,i) { return Scale.xScale(data[j].key+ " Cylinder")+ (i%val)*r*2;})    
                .attr("cy", function(d,i) { return StachChartHeight - (Math.floor(i/val))*r*2;})
    }

Any idea?

I don't quite understand your question, but it sounds like you're adding circles to the SVG graphic and then at some later time you want to wrap (some of) those circles in a `` element? If that's the question, then you'll need to remove the circles from the SVG graphic and re-append them within the newly added ``. Just appending a `` element doesn't do anything to the elements already in the graphic. — Stephen Thomas, Aug 03 '15 at 22:39

score 0 · Accepted Answer · answered Aug 04 '15 at 08:10

Like your comments say... One way to 'move' elements into another element with d3 is to select the elements, remove them and then append them into another element. For you it would probably look something like this:

for(j=0; j<data.length; j++) {
    var circlesToMove = svg.selectAll(".Color_" + data[j].key).remove();
    svg.append("g")
       .data(circlesToMove).enter()
       .append(function(d){ return d.node(); });
}

Note that remove returns the selection after taking the elements out of the dom.

How to append element after grouping my circles in D3?

1 Answers1