Question

我想在circle元素中创建g。我可以创建组并将元素转换得很好。但是，我还没弄清楚如何在g元素中创建圆圈。

使用此代码，我获得了元素g和圈子，但圈子位于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; })

我该如何解决？以下是代码段：https://plnkr.co/edit/pnoSGSEv7pDo28HxRifd

Answer 1

您需要通过选择组而不是svg：

来附加到组

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

以下是更新后的代码：https://plnkr.co/edit/4WtXqUrDAdCkOYSdqori

d3选择将元素添加到另一个内部

1 个答案: