D3 add an item only if the item does not exist

Question

I have a problem with D3, if I add an element a second time, I will get duplicate elements in the parent node.

node.enter().insert("svg:g") .attr("class", 'test') .attr("width", '63px') .attr("height", '68px') .call(force.drag); node.append("svg:circle") .attr("class", "bg-circle") .attr("r", "30px"); 

For example, I get:

 <g class="test"> <circle class="bg-circle" /> <circle class="bg-circle" /> </g> 

But I want:

 <g class="test"> <circle class="bg-circle" /> </g> 

Even when I call my function to set the nodes a second time.

Answer 1

I think you want to use d3 to draw some interface. I used something like this:

  function appendOnce(selection, s) { var l = s.split("."); // l[0] tag, l[0] dot separated classes var g = selection.selectAll(s) .data([0]) g.enter().append(l[0]) .attr("class", l.slice(1).join(" ")) return g; } // and then use var clild = appendOnce(parent, "text.y-caption") .attr(...) .style(...);