javascript - 取消 D3 中元素的分组

Question

在我看来，D3 中没有用于取消元素分组的 native 函数。 因此，我尝试从组中删除该元素，然后使用此 stackoverflow 通过追加方法重新创建该元素。回答。

不幸的是，我的代码( fiddle )包含(至少)一个错误。我无法理解这是什么。

[创建四个红色圆圈，然后将第一个圆圈从所有圆圈组中分离出来后将其颜色从红色更改为绿色]

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

    var dataSet = [10, 20, 30, 40];

    var group=svg.append("g");
    var circles = group.selectAll('circle')
    .data(dataSet)
    .enter()
    .append('circle')
    .attr("r",function(d){ return d })
    .attr("cx",function(d, i){ return i * 100 + 50 })
    .attr("cy",50)
    .attr("fill",'red');

    var circle=circles.select("circle");
    var removed = circle.remove();
    var newcircle=svg.append(function() {
        return removed.node();
    });
    d3.select(newcircle).attr("fill","green");

Answer 1

您的代码中有两个错误:

1. 您尝试从圆圈选项中选择一个圆圈。但是，这会选择该选择中圆圈的子元素，这没有任何意义。而不是

   var circle = circles.select("circle");
   

   你想要

   var circle = group.select("circle");
   

   这样您就可以从组中选择圆圈。

2. newCircle 已经是一个 d3 选择对象。通过d3.select(newcircle)重新选择是错误的。代码应该类似于

   newcircle.attr("fill", "green");
   

将所有这些放在一起，您最终会得到如下结果:

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

   var dataSet = [10, 20, 30, 40];

   var group  =svg.append("g");
   var circles = group.selectAll('circle')
    .data(dataSet)
    .enter().append('circle')
      .attr("r",function(d){ return d })
      .attr("cx",function(d, i){ return i * 100 + 50 })
      .attr("cy",50)
      .attr("fill",'red');

   var circle = group.select("circle");
   var removed = circle.remove();
   var newcircle = svg.append(function() {
     return removed.node();
   });
   newcircle.attr("fill", "green");

<script src="https://d3js.org/d3.v5.js"></script>

<svg width="600" height="200"></svg>