D3js force duplicate nodes on enter()

Question

I am having some issues with d3js and I can't figure out what is going on. The idea is to draw initial graph from some endpoint data (first img), that's fine works well. Each node is clickable, on click ajax call is made for that node and data is returned, based on some criteria at that point nodes.push(xx), links.push(xx) happens to add new nodes and restart() is called to draw new nodes and links. The issue is that the main graph is doing the correct thing (Not showed on screenshots as I had to put fake data on the first graph i.e. calling an endpoint /record/id/first doesn't return a data) but there are bunch of random nodes showing up in the right bottom corner.

You can also see on the example below, even if the data doesn't change after clicking on first/second/third something wrong goes with node.enter() after restart() with the same data passed in...

JS FIDDLE: http://jsfiddle.net/5754j86e/

var   w = 1200,
      h = 1200;

var nodes = [];
var links = [];
var node;
var link;
var texts;

var ids = [];

var circleWidth = 10;

var initialIdentifier = "marcin";

nodes = initialBuildNodes(initialIdentifier, sparql);

links = initialBuildLinks(sparql);

//Add SVG

var svg = d3.select('#chart').append('svg')
  .attr('width', w)
  .attr('height', h);

var linkGroup = svg.append("svg:g").attr("id", "link-group");
var nodeGroup = svg.append("svg:g").attr("id", "node-group");
var textGroup = svg.append("svg:g").attr("id", "text-group");

//Add Force Layout

var force = d3.layout.force()
  .size([w, h])
  .gravity(.05)
  .charge(-1040);

force.linkDistance(120);

restart();


function restart() {

    force.links(links)

    console.log("LINKS ARE: ", links)

    link = linkGroup.selectAll(".link").data (links);

    link.enter().append('line')
        .attr("class", "link");

    link.exit().remove();

    force.nodes(nodes)

    console.log("NODES ARE: ", nodes)

    node = nodeGroup.selectAll(".node").data (nodes);

    node.enter().append("svg:g")
            .attr("class", "node")
            .call(force.drag);

    node.append('circle')
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; })
        .attr('r', circleWidth )
        .attr('fill', function(d, i) {
            if (i>0) { return palette.pink }
            else { return palette.blue }
        })

        .on("click", function(d) {
            nodeClicked (d);
        })

        .on('mouseenter', function(d){
            nodeMouseEnter(d)
            })
        .on('mouseout', function(d){
            nodeMouseOut(d)
        });


    node.exit().remove();

    var annotation = textGroup.selectAll(".annotation").data (nodes);

    annotation.enter().append("svg:g")
            .attr("class", "annotation")
            .append("text")
            .attr("x", function(d) { return d.radius + 4 })
            .attr("y", ".31em")
            .attr("class", "label")
            .text(function(d) { return d.name; });
    annotation.exit().remove();


    force.start();
}


function nodeClicked (d) {

    // AJAX CALL happens here and bunch of nodes.push({name: "new name"}) happen

}


force.on('tick', function(e) {
        link
            .attr('x1', function(d) { return d.source.x })
            .attr('y1', function(d) { return d.source.y })
            .attr('x2', function(d) { return d.target.x })
            .attr('y2', function(d) { return d.target.y })

        node.attr('transform', function(d, i) {
            return 'translate('+ d.x +', '+ d.y +')';
        })

        svg.selectAll(".annotation").attr("transform", function(d) {
            var labelx = d.x + 13;
            return "translate(" + labelx + "," + d.y + ")";
        })



    });

Answer 1

Okay I got it, based on the docs (https://github.com/mbostock/d3/wiki/Selections#enter):

var update_sel = svg.selectAll("circle").data(data)
update_sel.attr(/* operate on old elements only */)
update_sel.enter().append("circle").attr(/* operate on new elements only */)
update_sel.attr(/* operate on old and new elements */)
update_sel.exit().remove() /* complete the enter-update-exit pattern */

From my code you can see I do enter() and then once again I add circle on node in a separate statement.

node = nodeGroup.selectAll(".node").data (nodes);

    node.enter().append("svg:g")
            .attr("class", "node")
            .call(force.drag);

    node.append('circle')
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; })
        .attr('r', circleWidth )
        .attr('fill', function(d, i) {
            if (i>0) { return palette.pink }
            else { return palette.blue }
        });

Adding circle should be within the scope of enter() otherwise it happens to all nodes not only the new nodes therefore it should be :

    node.enter().append("svg:g")
      .attr("class", "node")
      .call(force.drag)

      .append('circle')
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; })
        .attr('r', circleWidth )
        .attr('fill', function(d, i) {
            if (i>0) { return palette.pink }
            else { return palette.blue }
        });