D3：在力布局中的两个不同g元素之间移动圆

Question

我有两个g元素，每个元素都包含圆圈。 使用force.layout来组织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();
    }

我需要使用过渡将圆（例如id = 1）从第一个g元素移动到第二个g元素。

任何建议表示赞赏。

Answer 1

可以办到。

我所做的是：

1）使用jquery将点附加到目标组2）使用转换（无过渡）将点移回其原始位置3）将点过渡到其新位置

jQuery用于appendTo方法。 可以将其删除并替换为一些纯Javascript内容，但这非常方便。

我在这里有一部分工作的小提琴。 绿点工作正常，但蓝点出问题。 不知道为什么。

Answer 2

在我看来，过渡只在一个元素上起作用。 如果一个元素在DOM树中的位置从一个g更改为另一个，那么我想不出一种方法来使其平滑过渡，因为它基本上是二进制拆分：现在在g之下有一个元素，现在是走了，但其他地方还有一个。

为了实现我想做的事情，我会做些什么：将所有内容归为同一“ g”，分别分配颜色和翻译，然后为要更改的单个元素更改颜色和翻译。

但是，请勿将其作为可靠的声明，即您无法按照最初的意愿进行操作。