selection.exit（）。remove（）方法不会覆盖或删除

Question

I have a problem with updating existing layout data.

I have nodes, where every node consists of group with circle and foreignObject nested. After nodes data update, content of each node (circle and foreignObject) is added one more time to group element.

I am pretty sure that problem is somewhere between enter().data() and exit().remove() methods.

My code:

var node = mainSvg.select('.nodes').selectAll('.node')
    .data(nodes, function(d) {
        return d.id
    });

node.enter().append('g');

var circle = node.append('circle');
var foreignObject = node.append('foreignObject');

node.exit().remove();

I dropped out needles code, so it could be as cleaner as it can.

Answer 1

I am still not sure what exactly is there behind exit and enter methods, but I solved the problem.

Old code

var node = mainSvg.select('.nodes').selectAll('.node')
    .data(nodes, function(d) {
        return d.id
    });

node.enter().append('g');

var circle = node.append('circle');
var foreignObject = node.append('foreignObject');

node.exit().remove();

New code

var node = mainSvg.select('.nodes').selectAll('.node')
    .data(nodes, function(d) {
        return d.id
    }).enter().append('g');

var circle = node.append('circle');
var foreignObject = node.append('foreignObject');

mainSvg.select('.nodes').selectAll('.node')
    .data(nodes, function(d) {
        return d.id
    }).exit().remove();

And it works fine. Thanks to @LarsKothoff for patience and will to help.