javascript - How to create link between nodes from different svg elements using d3.js -

updated : working visualization using d3.js (javascript library). requirement follows: there multiple number of groups ( represented rectangular boxes), , there multiple number of nodes in each group. given set of links between various nodes. want use force directed layout. can move boxes , nodes across screen , links should move accordingly.

i able create boxes , nodes inside boxes not able create links. links not getting aligned nodes , links not moving in accordance movement of nodes. can please me? here jsfiddle link of code.

http://jsfiddle.net/s6y183mh/32/

var width = 600, height = 500; radius =10;  var svg = d3.select("body").append("svg")    .attr("width", 900)    .attr("height", 800)    .style("background-color","#ece9e9")    .attr("overflow","scroll");  // outer force layout  var graph = {   "nodes": [     {"name": "probe1", "group": 1},     {"name": "probe2", "group": 1},     {"name": "probe3", "group": 1},     {"name": "probe4", "group": 1},     {"name": "probe5", "group": 2},     {"name": "probe6", "group": 2}   ],   "links": [     {"source": 1, "target": 0, "value": 1},     {"source": 2, "target": 0, "value": 8},     {"source": 3, "target": 0, "value": 10},     {"source": 3, "target": 2, "value": 6},     {"source": 4, "target": 0, "value": 1}   ] };  var outerdata = [     {"group": "a"},     {"group": "b"},     {"group": "c"},      {"group": "d"},     {"group": "e"},     {"group": "f"},      {"group": "g"},     {"group": "h"},     {"group": "i"} ];  var outerlayout = d3.layout.force()    .size([800,800])    .charge(-8000)    .gravity(0.1)    .friction(.7)    .links([])    .nodes(outerdata)    .on("tick", outertick)    .start();  var outernodes = svg.selectall("g.outer")   .data(outerdata, function (d) {return d.group;})   .enter()   .append("g")   .attr("class", "outer")   .attr("id", function (d) {return d.group;})   .call(outerlayout.drag());  outernodes   .append("rect")   .style("fill", "#ece9e9")   .style("stroke", "black")   .attr("height",120)   .attr("width",120);    var onode = svg.selectall(".outer")     .append("title")       .text(function(d) { return d.group; });  // inner force layouts  var inneradata = {   "nodes": [     {"name": "probe 1", "group": 1},     {"name": "probe 2", "group": 1},     {"name": "probe 3", "group": 1},     {"name": "probe 4", "group": 1}   ],   "links": [     {"source": 1, "target": 0, "value": 1},     {"source": 2, "target": 0, "value": 2}   ] };  var inneralayout = d3.layout.force()    .size([100,100])    .charge(-400)    .gravity(0.75)    .links([])    .nodes(graph.nodes)    .on("tick", inneratick)    .start();  var anode = svg.select(".outer#a");  var inneranodes = anode.selectall("g.inner")   .data(graph.nodes, function (d) {return d.name;})   .enter()   .append("g")   .attr("id", function (d) {return d.name;})   .call(inneralayout.drag()    .on("dragstart", function(){                     d3.event.sourceevent.stoppropagation();     })    );  inneranodes   .append("circle")   .style("fill", "#8dd623")   .style("stroke", "#8dd623")   .attr("r", 6)   .attr("class", "inner");  // functions  function outertick (e) {outernodes.attr("transform", function (d) {return        "translate(" + d.x + "," + d.y + ")";});                     outernodes.attr("x", function(d) { return d.x = math.max(20, math.min(width, d.x)); })                                  .attr("y", function(d) { return d.y = math.max(20, math.min(height, d.y)); });                     } function inneratick (e) {//inneranodes.attr("cx", function(d) { return d.x = math.max(radius, math.min(width - radius, d.x)); })     //.attr("cy", function(d) { return d.y = math.max(radius, math.min(height - radius, d.y)); }); inneranodes.attr("transform", function (d) {return "translate(" + (d.x +10) + "," + (d.y +10) + ")";}); }   function changeforceouter(charge, gravity) {     outerlayout.charge(charge).gravity(gravity); }  function changeforceinner(charge, gravity) {     var tmp = "inner"+"a"+"layout";     inneralayout.charge(charge).gravity(gravity); }  settimeout(function(){ changeforceouter(0,0); changeforceinner(0,0);  }, 2000);  (function()     {         var force = d3.layout.force()                   .gravity(.5)                   .charge(-300)                   .friction(.7)                   .linkdistance(100)                   .linkstrength(0)                   .size([width, height]);          var link = svg.selectall(".line")                       .data(graph.links)                       .enter().append("line")                       .style("fill", "green" )          var temp = svg.selectall(".inner")                   .style("fill","red");           var node = svg.selectall(".inner")                       //.data(graph.nodes)                       .append("title")                       .text(function(d) { return d.name; });          node = svg.selectall(".inner")                   .data(graph.nodes)                   .enter().append("circle")                  .attr("r", radius - .75)                  .style("fill", "red" );         node.append("title")        .text(function(d) { return d.name; });          force           .nodes(graph.nodes)            .links(graph.links)            .on("tick", tick)            .start();         /*while (force.alpha() >0.005) {              force.tick();          }*/          function changeforce(charge, gravity) {              force.charge(charge).gravity(gravity);           }       //----------------------------      function tick() {         node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });         node.attr("cx", function(d) { return d.x = math.max(radius, math.min(width - radius, d.x)); })     .attr("cy", function(d) { return d.y = math.max(radius, math.min(height - radius, d.y)); });        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; });     }        function changeforce(charge, gravity) {         force.charge(charge).gravity(gravity);     }     changeforce(0, 0); })();