[Solved]-How to use D3 force layout with existing SVG elements as nodes-d3.js

Based on advice from Lars Kotfoff :

Working fiddle here

If the elements to be graph-ed already exist, simply skip the enter() D3 phase and use select() or selectAll() based on a common characteristic of your elements ( a class name for instance ).

This is how the element got created ( added a specific class for allowing an isolated selection ):

var element0a = svgContainer.append("g").attr("class","node").attr("transform","translate(100,100)");
var element0b = element0a.append("rect").attr("x",0).attr("y",0).attr("width",20).attr("height",10).attr("fill","red");

This is thene part of the code replacing the enter() phase

var node = svgContainer.selectAll("g.node")
    .data(nodeArray)
    .call(force.drag);

This is what was removed

var node = svgContainer.selectAll("g.node")
    .data(nodeArray)
    .enter().append("svg:g")
    .attr("class", "node")
    .call(force.drag);

// HERE (below) COMES THE ISSUE, where you see append("cicle") I want to append the nodeArray's ".ui" element. 

node.append("circle")          // <--- 
    .attr("class", "node")
    .attr("r",10)
    .attr("fill","orange")
    .call(force.drag);