Confining force layout's groups of nodes to area of SVG element in d3

问题

I'm working on a d3 visualization, and I'd like to have a tiered system of three circles to confine the nodes of a force layout. A group of nodes would be confined to the space between the previous smaller circle and the next larger one.

My code:

        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);

I have no idea where to even start. Is using a force layout even the best option here? Sorry if the question isn't specific enough. I just need to know if what I'm suggesting is possible with my current set up.

Thanks

来源：https://stackoverflow.com/questions/33075728/confining-force-layouts-groups-of-nodes-to-area-of-svg-element-in-d3