我有两个 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/