разгруппировать элемент в D3

Question

Мне кажется, что нет нативной функции для разгруппировки элемента в D3.Итак, я попытался удалить элемент из группы и затем воссоздать элемент методом добавления, используя этот 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. Вы пытаетесь выбрать круг из выбора circles.Однако это выберет sub -элемент окружностей в этом выделении, что не имеет никакого смысла.Вместо

   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>