Javascript d3和x27；s强制布局未正确对齐节点和链接

我正在使用D3库构建图形可视化。但这也带来了一些问题。 可以有多个框，每个框中可以有多个节点。各种链接之间存在链接。 节点应该是可拖动的，链接也应该与其各自的链接一起拖动。 当我应用force layout时，节点在其各自的框和链接外部创建。 任何帮助都将不胜感激

以下是我的JSFIDLE链接：

var宽度=700，
高度=600；
半径=10；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，900）
.attr（“高度”，800）
.style（“背景色”，“#ECE9E9”）
.attr（“溢出”、“滚动”）；
变量图={
“节点”：[
{“name”：“Probe1”，“group”：“A”}，
{“name”：“Probe2”，“group”：“A”}，
{“name”：“Probe3”，“group”：“A”}，
{“name”：“Probe4”，“group”：“B”}，
{“name”：“Probe5”，“group”：“B”}，
{“name”：“Probe6”，“group”：“B”}，
{“name”：“Probe7”，“group”：“C”}
],
“链接”：[
{“源”：1，“目标”：0，“值”：1}，
{“源”：2，“目标”：0，“值”：8}，
{“源”：3，“目标”：0，“值”：10}，
{“源”：3，“目标”：2，“值”：6}，
{“源”：4，“目标”：0，“值”：1}
]
};
var outerData=[
{“组”：“A”}，
{“组”：“B”}，
{“组”：“C”}，
{“组”：“D”}
];
var outerLayout=d3.layout.force（）
.尺寸（[800800]）
。收费（-8000）
.重力（0.1）
.摩擦力（.7）
.links（[]）
.节点（外部数据）
.on（“勾号”，外层标记）
.start（）；
var outerNodes=svg.selectAll（“g.outer”）
.data（outerData/，函数（d）{返回d.group；}
)
.输入（）
.附加（“g”）
.attr（“类”、“外部”）
.attr（“id”，函数（d）{返回d.group；}）
.call（outerLayout.drag（））；
外节点
.append（“rect”）
.样式（“填充”，“#ECE9E9”）
.style（“笔划”、“黑色”）
.attr（“高度”，150）
.attr（“宽度”，150）；
var oNode=svg.selectAll（“.outer”）
//.数据（图.节点）
.附加（“标题”）
.text（函数（d）{return d.group；}）；
//---------功能
函数outerTick（e）{outerNodes.attr（“transform”，函数（d）{return”translate（“+d.x+”，“+d.y+”）”）；}）；
//outerNodes.attr（“x”，函数（d）{返回d.x=Math.max（20，Math.min（width，d.x））；}）
//.attr（“y”，函数（d）{返回d.y=Math.max（20，Math.min（height，d.y））；}；
}
功能更改外部（电荷、重力）{
var tmp=“内部”+“A”+“布局”；
外部布局。电荷（电荷）。重力（重力）；
}
setTimeout（函数（）{changeForceouter（0,0）；}，2000）；
//---------------------------
对于（var i=0；i0.005）{
force.tick（）；
}*/
功能改变力（电荷、重力）{
力。电荷（电荷）。重力（重力）；
}
//----------------------------
函数tick（）{
attr（“cx”，函数（d）{returnd.x=Math.max（radius，Math.min（width-radius，d.x））；}
.attr（“cy”，函数（d）{返回d.y=Math.max（半径，Math.min（高度-半径，d.y））；}；
attr（“x1”，函数（d）{返回d.source.x；}）
.attr（“y1”，函数（d）{返回d.source.y；}）
.attr（“x2”，函数（d）{返回d.target.x；}）
.attr（“y2”，函数（d）{返回d.target.y；}）；
}
//---------------------------
/*var populateCell=函数（i）{
var ident=“#”+graph.nodes[i].组；
d3.选择（标识）。附加（“圆”）
.attr（“r”，半径-.75）
.样式（“填充”、“8DD623”）；
}; */
setTimeout（函数（）{changeForce（0，0）；}，2000）；
//改变力（0,0）；

您能不能改为显示图片的外观？您能改为显示图片的外观？您能改为显示图片的外观吗？

        var width = 700,
        height = 600;
        radius =10;

    var svg = d3.select("body").append("svg")
   .attr("width", 900)
   .attr("height", 800)
   .style("background-color","#ECE9E9")
   .attr("overflow","scroll");

   var graph = {
  "nodes": [
    {"name": "Probe1", "group": "A"},
    {"name": "Probe2", "group": "A"},
    {"name": "Probe3", "group": "A"},
    {"name": "Probe4", "group": "B"},
    {"name": "Probe5", "group": "B"},
    {"name": "Probe6", "group": "B"},
    {"name": "Probe7", "group": "C"}
  ],
  "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"}
];

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",150)
  .attr("width",150);

    var oNode = svg.selectAll(".outer")
      //.data(graph.nodes)
    .append("title")
      .text(function(d) { return d.group; });

      //---------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 changeForceouter(charge, gravity) {
        var tmp = "inner"+"A"+"Layout";
        outerLayout .charge(charge).gravity(gravity);
    }
    setTimeout(function(){ changeForceouter(0,0); }, 2000);

    //---------------------------

    for(var i=0;i<7;i++)
 { 
    var ident = "#" + graph.nodes[i].group;
  svg.select(ident).append("circle") 
  .attr("r", radius - 2)
      .style("fill", "#8DD623" );
 }  

    var force = d3.layout.force()
    .gravity(.4)
    .charge(-300)
    .friction(.7)
    .linkDistance(1000)
    .linkStrength(0)
    .size([width, height]);



  var link = svg.selectAll("line")
      .data(graph.links)
    .enter().append("line")
    .style("fill", "green" );

 var node = svg.selectAll("circle")
      .data(graph.nodes)
      //.call(force.drag);
      .call(force.drag()
       .on("dragstart", function(){            
            d3.event.sourceEvent.stopPropagation();
        })
       );

     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("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; });
  }

    //---------------------------

    /* var populateCell = function(i) { 
                    var ident = "#" + graph.nodes[i].group;
  d3.select(ident).append("circle") 
  .attr("r", radius - .75)
      .style("fill", "#8DD623" );
}; */
setTimeout(function(){ changeForce(0, 0);}, 2000);

    //changeForce(0, 0);