Transition Options

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>  
    <script src="//d3js.org/d3.v4.min.js"></script>
    <div style="margin-left: 50px; margin-top: 20px;">
        <button id="btn1" type="button" class="btn btn-info btn-sm">Transition - Sequential</button>
        <button id="btn2" type="button" class="btn btn-info btn-sm">Transition - Together</button>
        &nbsp; &nbsp; &nbsp;
        <button id="btn3" type="button" class="btn btn-info btn-sm">Change Color</button>
        <button id="btn4" type="button" class="btn btn-info btn-sm">Change Color - Loop</button>
    </div><br /><br />
    <p id="c1"></p><br/>
    <p id="c2"></p><br />

var svg = d3.select("#c1").append("svg")
         .attr("width", width)
         .attr("height", height);

svg.append("circle")
         .attr("cx",150)
         .attr("cy", 75)
         .attr("r", 60)
         .attr('id', "c1")
         .attr("class", "circ")
         .style("opacity", 1.0)
         .style("fill", "#f46d43");

var svg1 = d3.select("#c2").append("svg")
         .attr("width", width)
         .attr("height", height);

svg1.append("circle")
         .attr("cx", 150)
         .attr("cy", 75)
         .attr("r", 60)
         .attr('id', "c2")
         .attr("class", "circ")
         .style("opacity", 1.0)
         .style("fill", "#f46d43");

var pos = 1;

d3.select("#btn1").on("click", function () {

var t = svg.transition().duration(750);

if (pos == 1)  
         {
         svg.select("#c1").transition(t).attr("cx", 600);
         svg1.select("#c2").transition(t).attr("cx", 600);
         pos = 2;
         }
         else
         {
             svg.select("#c1").transition(t).attr("cx", 150);
             svg1.select("#c2").transition(t).attr("cx", 150);
             pos = 1;
         }
     });

d3.select("#btn2").on("click", function () {

if (pos == 1) {
             d3.selectAll("circle").transition()
                 .delay(350)
                 .on("start", function repeat() {
                     d3.active(this)
                         .attr("cx", 600);
                 });
             pos = 2;
         }
         else
         {
             d3.selectAll("circle").transition()
                 .delay(350)
                 .on("start", function repeat() {
                     d3.active(this)
                         .attr("cx", 150);
                 });
             pos = 1;
         }
     });

d3.select("#btn3").on("click", function () {

d3.selectAll("circle").transition()
             .delay(350)         
             .on("start", function repeat() {
                 d3.active(this)
                     .style("fill", "#68A8AD")
                     .transition()
                     .delay(350)
                     .style("fill", "#96CEB4")
                     .transition()
                     .delay(350)
                     .style("fill", "#737495");
             });
     });

d3.select("#btn4").on("click", function () {

d3.selectAll("circle").transition()
             .delay(350)
             .on("start", function repeat() {
                 d3.active(this)
                     .style("fill", "#68A8AD")
                     .transition()
                     .delay(350)
                     .style("fill", "#96CEB4")
                     .transition()
                     .delay(350)
                     .style("fill", "#737495")
                     .transition()
                     .delay(350)
                     .on("start", repeat);
             });
     });

</script>
</body>

https://d3js.org/d3.v4.min.js