将力布局的节点组限制在d3中的SVG元素区域

Question

我正在研究d3可视化，我希望有一个由三个圆圈组成的分层系统来限制力布局的节点。一组节点将被限制在前一个较小圆圈和下一个较大圆圈之间的空间中。

我的代码：

        var width = 600;
        var height = 600;

        var svgContainer = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

        var force = d3.layout.force()
                .gravity(.05)
                .distance(100)
                .charge(-100)
                .size([width, height]);

        var cir_arr = [];
        for (var i = 3; i > 0; i--) {
            cir_arr.push(i);
        }

        var circles = svgContainer.selectAll("circle")
                .data(cir_arr)
                .enter()
                .append("circle")
                .attr("cx", width/2)
                .attr("cy", height/2)
                .attr("r", function(d) {
                    return 50*d;
                })
                .attr("fill", "white")
                .attr("stroke", "black")
                .attr("stroke-width", 3);

我不知道从哪里开始。在这里使用力布局甚至是最好的选择吗？对不起，如果问题不够具体。我只需要知道我目前的设置是否可以提出建议。

由于