Question

在我看来，D3中没有取消元素分组的本机功能。因此，我尝试从该组中删除该元素，然后使用此stackoverflow答案通过append方法重新创建该元素。

很遗憾，我的代码（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

您的代码中有两个错误：

您尝试从circles选择中选择一个圆圈。但是，这将选择该选择中圆圈的 sub 元素，这没有任何意义。代替
```
var circle = circles.select("circle");
```
您想要
```
var circle = group.select("circle");
```
通过这种方式，您可以从组中选择圆圈。
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>

在D3中取消元素分组

1 个答案: