D3.js Hinzufügen ziehbar Kreisen funktioniert nicht, wenn einzelne Zugabe

Question

Ich folge diesem Beispiel:

https://bl.ocks.org/mbostock/6123708

das, was ich nicht verstehen kann, ist, wie ich möglicherweise neue Kreisen hinzufügen kann, wenn eine Schaltfläche geklickt wird, zum Beispiel:

d3.tsv("dots.tsv", dottype, function (error, dots) { 
    container.append("g") 
       .attr("class", "dot") 
       .selectAll("circle") 
       .data(dots) 
       .enter().append("circle") 
       .attr("r", 5) 
       .attr("cx", function (d) { 
        return d.x; 
       }) 
       .attr("cy", function (d) { 
        return d.y; 
       }) 
       .call(drag); 
     }); 

     function dottype(d) { 
      d.x = +d.x; 
      d.y = +d.y; 
      return d; 
     } 
self.addNode = function() { 
      container.append('g') 
       .attr('class', 'dot') 
       .append('circle') 
       .attr('r', 35) 
       .attr('cx', (i * 100) + cx) 
       .attr('cy', (i * 100) + cy) 
       //.style('fill', 'purple') 
       .call(drag); 
      i++; 
     }; 

der erste Teil das gleiche wie das Beispiel ist, habe ich dann eine Funktion einen einzigen Kreis im Inneren des Behälters zu addieren, ist das Problem, dass, wenn ich die neue hinzugefügt Kreis ziehen ich nur die bewegen externes G-Element, so bewegt sich jeder o der Kreis zusammen.

Ich kann nicht verstehen, warum, da die Funktionen die gleichen sind (ich sogar den Stil ‚füllen‘ entfernt sicher sein)

Answer 1

Sie geben Ihr Layout ein Datum in .data(dots) aber, wenn Sie einen Knoten hinzufügen In Ihrer AddNode-Funktion sind dem Layout diese neuen Daten nicht bekannt. Sie möchten die neuen Knotendaten zu Ihrem Datenarray (Punkte) hinzufügen/schieben und die Zeichenfunktion aufrufen.

Daher sollten Sie den Code unter d3.tsv in eine Funktion schneiden, um sie erneut aufzurufen, wenn Sie die Daten aktualisieren.