d3v4 принудительно добавляет два новых вложенных узла для каждого существующего узла

Question

Для каждого из узлов в моей силовой симуляции я хотел бы создать два новых узла под ней по обе стороны (см. График ниже) как часть симуляции. У меня возникли проблемы с успешным рисованием новых узлов как вложенных выбор исходных узлов. В Plunker вы можете видеть режим «Коровы акулы», и режим «умножения» в идеале должен включать четыре узла, аналогичных режиму «Коровы акулы», в той же позиции с еще восемью узлами (по два каждый), расположенными ниже. Я создал матрицу для хранения данных для новых узлов в виде вложенного массива, чтобы в каждом подмассиве было два элемента с общим количеством подрешеток x, где x - количество исходных узлов. Я добавляю координаты x и y, где, как мне кажется, должны быть новые позиции узлов (я не уверен, что правильно вычисляю позиции). Кажется, я успешно создаю новые элементы узла (они существуют, если вы посмотрите в DOM), но ничего не рисуется правильно. Может ли кто-нибудь указать мне правильное направление правильного добавления новых узлов в качестве вложенных выборок в симуляции силы? спасибо

ниже мой код, а вот plunkr: https://plnkr.co/edit/UgZyjfsGmDRRkEAx66mJ?p=preview

    var matrix = [];

    var i;

    for (i = 0; i < nodes.length; i++) {
      var newarr = [];
      var obj1 = {};
      var obj2 = {};
      obj1['x'] = nodes[i].x + (0.1 * width) * Math.cos((5 * Math.PI) / 4);
      obj2['x'] = nodes[i].x + (0.1 * width) * Math.sin((7 * Math.PI) / 4);
      obj1['y'] = nodes[i].y + (0.1 * width) * Math.cos((5 * Math.PI) / 4);
      obj2['y'] = nodes[i].y + (0.1 * width) * Math.sin((7 * Math.PI) / 4);
      newarr.push(obj1)
      newarr.push(obj2)
      matrix.push(newarr);
    }

    var newNodes = filterNodes('family_common', 'Cow Sharks');

    circles = g.selectAll(".sharks").data(newNodes);

    circles.exit()
      .transition()
      .duration(750)
      .attr("r", 0)
      .remove();

    circles.transition().duration(750)
      .attr("fill", function(d) {
        return colorScale(d.family)
      }).attr("r", function(d) {
        return radiusScale(+d.size);
      })



    circles.enter().append("circle").attr("class", "sharks")
      .attr("id", function(d) {
        var cname = d.name;
        cname = cname.split(' ');
        return cname[0] + '_' + cname[1];
      })
      .attr("fill", function(d) {
        return colorScale(d.family)
      }).attr("r", function(d) {
        return radiusScale(+d.size);
      })
      .attr('stroke', '')


    //here is where I attempt to create two new nodes for each of the cow shark nodes
    //but it's not working

    g.selectAll(".sharks").data(matrix)
      .selectAll(".sharkbabies")
      .data(function(d, i) {
        return d;
      })
      .enter().append('circle')
      .attr("class", "sharkbabies")
      .attr("cx", function(d) {
        return d.x
      })
      .attr("cy", function(d, i) {
        return d.y
      })
      .attr("r", 15)
      .attr("fill", "#81BC00");

  }

А вот мой второй подход к той же функции (многократно в планкре):

    var nodes = filterNodes('family_common', 'Cow Sharks');
    var matrix = [];

    nodes = $.grep(nodes, function(e) {
      return e.size != 0;
    });

    var i;

    for (i = 0; i < nodes.length; i++) {
      var newarr = [];
      var obj1 = {};
      var obj2 = {};
      obj1['x'] = nodes[i].x + (0.1 * width) * Math.cos((5 * Math.PI) / 4);
      obj2['x'] = nodes[i].x - (0.1 * width) * Math.sin((7 * Math.PI) / 4);
      obj1['y'] = nodes[i].y + (0.1 * width) * Math.cos((5 * Math.PI) / 4);
      obj2['y'] = nodes[i].y + (0.1 * width) * Math.sin((7 * Math.PI) / 4);
      newarr.push(obj1)
      newarr.push(obj2)
      matrix.push(newarr);
      nodes[i]['new'] = newarr;
    }



    var newCircles = g.selectAll(".sharks").data(nodes);


    newCircles.exit()
      .transition()
      .duration(750)
      .attr("r", 0)
      .remove();

    var newCirclesE =
      newCircles.enter().append("circle").attr("class", "sharks")
      .attr("id", function(d) {
        var cname = d.name;
        cname = cname.split(' ');
        return cname[0] + '_' + cname[1];
      })
      .attr("fill", function(d) {
        return colorScale(d.family)
      }).attr("r", function(d) {
        return radiusScale(+d.size);
      })
      .attr('stroke', '');

    var smallCircles = newCircles.merge(newCirclesE)
      .selectAll(".sharkbabies").data(function(d){
        return d.new;
      });

    smallCircles.enter().append('circle')
      .attr("class", "sharkbabies")
      .attr("cx", function(d) {
        return d.x
      })
      .attr("cy", function(d, i) {
        return d.y
      })
      .attr("r", 15)
      .attr("fill", "#81BC00");


    simulation.nodes(nodes)
      .on('tick', ticked);

    simulation.alpha(1).restart();