Первый элемент в получении данных перерисован, а не обновлен

Вот что похоже на то, что происходит в моем коде: https://codepen.io/anon/pen/zJmvXa?editors=1010

Нажмите кнопку "Обновить", чтобы увидеть проблему.

Проблема в этом CodePen, является его единственным перерисовкой первого элемента (Myriel).

Я думаю, что это должно быть вокруг входа, выхода или слияния, но я не совсем понимаю, что происходит.

Я думал, что слияние заключается в объединении существующих данных с новыми, и единственными данными, которые должны войти в ввод, должны быть новые данные. И выход для удаления избыточных данных?

Как этот граф имеет как круги, так и текст, должно ли слияние быть сделанным на элементе "g", который содержит эти?

Возможно, это связано с функцией данных:

 .data(dataset1.nodes, function(d, i) {
      return d;
    });

Если я изменю это, чтобы использовать d.id, он снова отображает все. Я предполагаю, что это связано с данными, имеющими атрибут id. Как это должно быть сделано?

  // Apply the general update pattern to the nodes.
  forceNetwork.node = d3
    .select("#nodesContainer")
    .selectAll("g.network-node")
    .data(dataset1.nodes, function(d, i) {
      return d 
    });

  forceNetwork.node.exit().remove();

  forceNetwork.nodeEnter = forceNetwork.node
    .enter()
    .append("g")
    .attr("id", function(d, i) {
      return "network-g-node-" + d.id;
    })
    .attr("class", function(d, i) {
      return "network-node";
    })
    .call(
      d3
        .drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended)
    ).merge(forceNetwork.node);

  forceNetwork.nodeEnter
    .append("circle")
    .attr("id", function(d) {
      return d.id;
    })
    .attr("class", "networkviewer-node")
    .attr("fill", "red")
    .attr("r", 20);

  // Append images
  forceNetwork.nodeEnter
   .append("text")
      .attr("dx", 12)
      .attr("dy", ".35em")
      .text(function(d) { return d.id });