D3: moving a circle between two different g elements in a force arrangement

Question

I have two g elements, each of which contains circles. Circles are organized using force.layout . Elements of g go over.

You can look here: demo . Short code:

 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(); } 

I need to move a circle (e.g. id = 1) from the first element g to the second using a transition.

Any suggestions are welcome.

Answer 1

It can be done.

What I've done:

1) Use jquery to add a point to the target group 2) Use a transform (without transition) to move the point back to its original location 3) Move the point to a new location

jQuery was used for the appendTo method. It can be removed and replaced with some clean Javascript material, but it is quite convenient.

I have a partially working script here. Green dots work correctly, but something is wrong with blue. I do not know why.

Answer 2

In my opinion, transitions work on one element. If an element changes its position in the DOM tree, from the bottom one g to another, I can’t think of a way to do this as one smooth transition, because it is basically a binary split: now there is an element under one g , now it disappeared, but where else something else.

What would I do to achieve what I think you want to do: Group everything under the same "g", assign color and translation individually, and then change the color and translation of this one element that you want to change .

But do not take this as a reliable statement that you cannot do it the way you wanted.