javascript - D3: 強制レイアウトで 2 つの異なる g 要素間で円を移動する

Question

gそれぞれ円を含む2 つの要素があります。円は を使用して編成されforce.layoutます。g要素が移行しています。

ここで見ることができます: demo。削減されたコード:

    var dots = svg.selectAll(".dots")
    .data(data_groups)
    .enter().append("g")
    .attr("class", "dots")
    .attr("id", function (d) {
     return d.name;
    })
    ...
    .each(addCircles);

    dots.transition()
    .duration(30000)
    .ease("linear")
    .attr("transform", function (d, i) {
        return "translate(" + (150 + i * 100) + ", " + 450 + ")";
    });

    function addCircles(d) {

        d3.select(this).selectAll('circle')
        .data(data_circles.filter(function (D) {
            return D.name == d.name
        }))
        .enter()
        .append('circle')
        .attr("class", "dot")
        .attr("id", function (d) {
            return d.id;
        })
        ...
        .call(forcing);
    }

    function forcing(E) {

        function move_towards(alpha) {
            ...
        }

        var force = d3.layout.force()
        .nodes(E.data())
        .gravity(-0.01)
        .charge(-1.9)
        .friction(0.9)
        .on("tick", function (e) {
            ...
        });
        force.start();
    }

gトランジションを使用して、最初の要素から 2 番目の要素に円 (たとえば id=1) を移動する必要があります。

任意の提案をいただければ幸いです。