gpt4 book ai didi

javascript - D3 : move circle between two different g elements in force layout

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:18:39 25 4
gpt4 key购买 nike

我有两个 g 元素,每个元素都包含圆圈。使用 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 元素移动到第二个元素。

如有任何建议,我们将不胜感激。

最佳答案

这是可以做到的。

我所做的是:

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

appendTo 方法使用了 jQuery。它可以被删除并替换为一些纯 Javascript 的东西,但它非常方便。

我有一个部分可用的 fiddle here.绿点工作正常,但蓝色点出了问题。不知道为什么。

关于javascript - D3 : move circle between two different g elements in force layout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17947474/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com