Force transition animation when same button is clicked
<p>I have three buttons which, when clicked change the min and max of a <code>time.scale</code>.</p>

<p>Transitioning works well but I'm trying to force the transition animation to happen even when the scale has not changed i.e. when the user clicks the same button.</p>

<p>This is the update code:</p>

<pre><code>function updateAxis(grp) {
    console.log(grp);
    var parsedDts = grp.map(function(d) {
        return parseDate(d);
    });
    var minDate = d3.min(parsedDts),
        maxDate = d3.max(parsedDts);

    var plotJ = d3.select("#yAxisG")

    //&gt;&gt; using [minDate, minDate] to try to force a transition even when clicking the same square
    var x = d3.time.scale().domain([minDate, minDate]).range([0, 800]);
    var axisY = d3.svg.axis()
        .orient('bottom')
        .scale(x);
    plotJ.transition().delay(2000).call(axisY);

    var x = d3.time.scale().domain([minDate, maxDate]).range([0, 800]);
    var axisY = d3.svg.axis()
        .orient('bottom')
        .scale(x);
    plotJ.transition().duration(2000).call(axisY);

}
</code></pre>

<p>I thought maybe to change the scale to <code>[minDate, minDate]</code> would force the animation, when re-clicking the same button, but it does not. </p>

<p>How can I force the animation when re-clicking the same button?</p>

<p>Working example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
    &lt;title&gt;Axis Testing&lt;/title&gt;
    &lt;script src="https://d3js.org/d3.v2.js"&gt;&lt;/script&gt;
    &lt;style type="text/css"&gt;
    #threeSquares {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 70px;
        height: 250px;
    }
    
    #barChart {
        position: absolute;
        top: 10px;
        left: 80px;
        height: 250px;
    }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="threeSquares"&gt;&lt;/div&gt;
    &lt;div id="barChart"&gt;&lt;/div&gt;
    &lt;script type="text/javascript"&gt;
    function squaresBasics() {
        var margin = {
                top: 35,
                right: 5,
                bottom: 5,
                left: 5
            },
            width = 70 - margin.left - margin.right,
            height = 250 - margin.top - margin.bottom;

        return {
            margin: margin,
            width: width,
            height: height
        };
    }

    function getdta() {
        return {
            'label': ['year', 'day', 'month'],
            'dts': [
                ['1/1/2016', '1/1/2017'],
                ['1/1/2016', '2/1/2016'],
                ['1/1/2016', '1/2/2016', '1/3/2016']
            ]
        };
    };

    var parseDate = d3.time.format("%d/%m/%Y").parse;


    //############# SQUARES ###################
    function addSquares() {

        var dta = getdta();

        var basics = squaresBasics();
        var margin = basics.margin,
            width = basics.width,
            height = basics.height;

        //Create SVG element
        var SQsvg = d3.select("#threeSquares")
            .append("svg")
            .attr({
                "width": width + margin.left + margin.right,
                "height": height + margin.top + margin.bottom,
                id: "squaresArea"
            });

        var SQg = SQsvg
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        SQg.selectAll("rect")
            .data(dta.label)
            .enter()
            .append("rect")
            .attr({
                x: margin.left,
                y: function(d, i) {
                    return i * 65
                },
                "width": width,
                "height": 50,
                fill: "blue"
            })
            .on("click", up);

        SQg.selectAll("text")
            .data(dta.label)
            .enter()
            .append("text")
            .text(function(d) {
                return d;
            })
            .attr({
                x: margin.left,
                y: function(d, i) {
                    return i * 65 + 20;
                },
                "font-family": "sans-serif",
                "font-size": "15px",
                fill: "white"
            })
            .on("click", up);


        function up(d, i) {
            //update bar chart when user selects a square
            var dta = getdta();
            updateAxis(dta.dts[i]);
        }

    }


    function addAxis() {
        var basics = squaresBasics();
        var margin = basics.margin,
            width = basics.width,
            height = basics.height;

        var dta = getdta();
        var dates = dta.dts[0];
        var parsedDts = dates.map(function(d) {
            return parseDate(d);
        });
        //console.log(d3.min(amounts));

        var minDate = d3.min(parsedDts),
            maxDate = d3.max(parsedDts);
        //console.log(minDate, maxDate)

        var svg = d3.select("#barChart")
            .append("svg")
            .attr({
                "width": 1000,
                "height": 500,
                id: "barChartPlot"
            });

        var x = d3.time.scale().domain([minDate, maxDate]).range([0, 800]);
        //console.log(x(new Date(2017, 7, 1)))
        //console.log(dta.dts.length)
        // console.log((margin.left - axisPadding), (margin.top + height));

        var axisPadding = 2;
        var leftAxisGroup = svg
            .append('g')
            .attr({
                transform: 'translate(' + ((margin.left + 15) - axisPadding) + ',' + (margin.top + height) + ')',
                id: "yAxisG"
            });
        var axisY = d3.svg.axis()
            .orient('bottom').scale(x);

        leftAxisGroup.call(axisY);

    }


function updateAxis(grp) {
    console.log(grp);
    var parsedDts = grp.map(function(d) {
        return parseDate(d);
    });
    var minDate = d3.min(parsedDts),
        maxDate = d3.max(parsedDts);

    var plotJ = d3.select("#yAxisG")
    
    //&gt;&gt; using [minDate, minDate] to try to force a transition even when clicking the same square
    var x = d3.time.scale().domain([minDate, minDate]).range([0, 800]);
    var axisY = d3.svg.axis()
        .orient('bottom')
        .scale(x);
    plotJ.transition().delay(2000).call(axisY);

    var x = d3.time.scale().domain([minDate, maxDate]).range([0, 800]);
    var axisY = d3.svg.axis()
        .orient('bottom')
        .scale(x);
    plotJ.transition().duration(2000).call(axisY);

}

    addSquares();
    addAxis();
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>