CODEWITHSUNDEEP
javascriptd3.jssvg
Adrian
Adrian

Reputation: 9590

d3 selection append element inside another

I want to create a circle inside a g element. I can create the groups and translate the element just fine. However, I haven't figure out how to create the circle into the g elements.

With this code I'm getting the element g and circles but the circles are outside the g:

var data = [
  {"x": 10, "y": 10}, 
  {"x": 20, "y": 20},
  {"x": 30, "y": 30},
];

var svg = d3.select('svg');

var t = d3.transition().duration(750);

  var group = svg
    .selectAll(".groups")
    .data(data) // JOIN

  group.exit() // EXIT
    .remove();      

  var groups = group.enter() // ENTER
    .append("g")
      .attr('class', 'groups')
    .merge(group)
      .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; });

  var circles = svg.selectAll('.circles')
    .data(data)
    .style("fill", "blue");

  circles.exit()
    .style("fill", "brown")
    .transition(t)
      .style("fill-opacity", 1e-6)
      .remove();

  circles.enter()
    .append('circle')
      .attr('r', 2.5)
      .attr('class', 'circles')
      .style("fill", "green")
    .merge(circles)
      .attr("r", (d) => d.y/5)
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; })

How can I fix it? Here is the snippet: https://plnkr.co/edit/pnoSGSEv7pDo28HxRifd

Upvotes: 0

Views: 659

Answers (1)

Marcelo
Marcelo

Reputation: 4282

You need to append to the groups by selecting the groups and not the svg:

  var circles = groups.selectAll('.circles')
    .data(data)
    .style("fill", "blue");

Here is the updated code:https://plnkr.co/edit/4WtXqUrDAdCkOYSdqori

Upvotes: 1

Related Questions