Ограничение групп узлов силового макета областью элемента SVG в d3

Я работаю над визуализацией 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);

Я понятия не имею, с чего даже начать. Является ли использование силового макета лучшим вариантом здесь? Извините, если вопрос недостаточно конкретен. Мне просто нужно знать, возможно ли то, что я предлагаю, с моей текущей настройкой.

Спасибо