D3 v4: force tick vs click to rotate and breaking the force

Question

I am trying to have rectangles on d3v4 draggable nodes in a force layout to rotate on click with a transition but the tick function seems to interfere with it, either by resetting the rotation attribute or ignoring the transition function.

These are the bits that trouble me:

//CLICK
function clicked(d, i) {
    d.ang = d.ang+180
    d3.select(this)
        .transition()
        .attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")"
        });
}

//FORCE
function ticked() {
    d.ang += 360
    var tiles = box.selectAll('.tile')
        .attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ") rotate(" + d.ang + ")"
        });
}

And here is a bin with an example

There is also another glitch that I can't figure out, where if you change the window size too fast or have too many objs (so that force makes them bounce wildly) eventually some of them will return NaN in their dx and dy and break their translation transformation. Any thoughts on that too would be great.

Thanks in advance!

Answer 1

Separate your transforms. Add another <g> element that will only control the location of the tiles and one that controls the rotation.

.eg

<g class="controls-location">
    <g class="controls-rotation">
        <rect>
        <circle>
    </g>
</g>