JSFiddle - React, Tailwind, and code Playground

by Robodude

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<svg width="500"></svg>
<br>
<button id="s">start</button>
<button id="e">end</button>

JavaScript

var xMap = function(d){
    return d.x;
};

var yMap = function(d){
    return d.y;
};

$("#s").click(function(){
    xMap = function(d){
        return d.x;
    };

    yMap = function(d){
        return d.y;
    };
    render();
});

$("#e").click(function(){
    xMap = function(d){
        return d.x2;
    };

    yMap = function(d){
        return d.y2;
    };
    render();
});

var count = 0;
var makePosition = function(x, y, x2, y2){
    return {
        id: count++,
		x: x,
        x2: x2,
        y: y,
        y2: y2
    };
}

var data = [
    makePosition(0, 0, 100, 100)
];

var svg = d3.select("svg");

function render(){
    var circleGroup = svg.selectAll("g").data(data, function(d) { return d.id; });
    
    var circle = circleGroup.enter().append("g").append("circle")
        .attr("r", 15)
    	.attr("fill", "red")


    //update
	updateCircles(circleGroup);


    circleGroup.exit().remove();
}

var updateCircles = function(circleGroup){
        var props = d3.transform(circleGroup.attr("transform"));
        circleGroup.attr("transform", function(d){
    		return "translate(" + xMap(d) + "," + props.translate[1] +")";
    	})
    
    circleGroup.transition().duration(2000)
            .attr("transform", function(d){
            return "translate(" + xMap(d) + "," + yMap(d) +")";
        }).each("interrupt", function(d){
        	updateCircles(circleGroup);
    	});
    
}

render();