javascript - d3.jsと循環ターンアラウンド効果

Question

これがスライダーのコードです - http://jsfiddle.net/nikunj2512/74qrC/14/

で作成されたこのコードでd3.jsは、出力ウィンドウに表示される左/右のテキストで長方形をスライドできます。

また、ユーザーが右/左をクリックするだけで最後の四角形に到達し、右/左をもう 1 つクリックすると、ユーザーは最初/最後の四角形に移動します ( で試してくださいjsfiddle) 。

しかし、そのアニメーションはフラットです。

私の質問は、ユーザーが最後の四角形にいるときに円形のナビゲーション手段を実現する方法があり、左/右にもう一度クリックすると、最初/最後の四角形に移動しますが、最後のクリックで円形に移動できますか?

私を助けてください。

JSコードは次のとおりです。

var numVisible = 4;
var rectWidth = 100,
rectHeight = 100,
rectPadding = 2,
numRects = 10;

var clipWidth = numVisible * rectWidth + (numVisible - 1) * rectPadding,
clipHeight = rectHeight;

var width = (rectWidth * numRects) + ((numRects - 1) * rectPadding),
height = rectHeight;

var data = d3.range(numRects);
var xScale = d3.scale.linear()
    .domain(d3.extent(data))
    .range([0, width - rectWidth]);

var svg = d3.select('#chart').append('svg')
    .attr('width', clipWidth)
    .attr('height', clipHeight);

svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
    .attr("width", clipWidth)
    .attr("height", clipHeight);

var g = svg.append("g");
g.selectAll("rect")
.data(data)
.enter()
.append('rect')
    .attr("class", "area").attr("clip-path", "url(#clip)")
    .attr('x', xScale)
    .attr('width', rectWidth)
    .attr('height', rectHeight)
    .style('fill', d3.scale.category20());

var update = function(){
g.selectAll("rect")
    .transition().duration(500)
    .attr('x', xScale);
};

d3.select("#left").on("click", function(){ 
if(xScale.domain()[0] - 1 > -numVisible){
    xScale.domain([xScale.domain()[0] - 1, xScale.domain()[1] - 1]);
    update();
}else if(xScale.domain()[0] - 1 == -numVisible)
{
    xScale.domain([xScale.domain()[0] + numRects, xScale.domain()[1] + numRects]);
    update();
}
});

d3.select("#right").on("click", function(){ 
if(xScale.domain()[0] + 1 < numRects){
    xScale.domain([xScale.domain()[0] + 1, xScale.domain()[1] + 1]);
    update();
}else if(xScale.domain()[0] + 1 == numRects)
{
    xScale.domain([xScale.domain()[0] - numRects, xScale.domain()[1] - numRects]);
    update();
}
});