Javascript d3.js与循环周转效应

下面是滑块的代码-

在这段用

d3.js

编写的代码中，我能够滑动矩形，并在输出窗口中显示左/右文本

另外，当用户通过单击右/左到达结束矩形时，如果他再单击右/左上的一个，则会将用户带到第一个/最后一个矩形（请在

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();
}
});

var numVisible=4；
可变宽度=100，
矩形高度=100，
矩形填充=2，
numRects=10；
var clipWidth=numVisible*rectWidth+（numVisible-1）*rectPadding，
clipHeight=垂直高度；
变量宽度=（rectWidth*numRects）+（numRects-1）*rectPadding），
高度=垂直高度；
var数据=d3.范围（numRects）；
var xScale=d3.scale.linear（）
.域（d3.范围（数据））
.范围（[0，宽度-矩形宽度]）；
var svg=d3。选择（“#图表”）。追加（'svg'）
.attr（'width'，clipWidth）
.attr（'高度'，Clipheght）；
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，clipWidth）
.attr（“高度”，clipHeight）；
var g=svg.append（“g”）；
g、 selectAll（“rect”）
.数据（数据）
.输入（）
.append（'rect'）
.attr（“类”、“区域”）.attr（“剪辑路径”、“url（#剪辑）”）
.attr（'x'，xScale）
.attr（'width'，rectWidth）
.attr（'height'，rectHeight）
.style（'fill'，d3.scale.category20（））；
var update=函数（）{
g、 selectAll（“rect”）
.transition（）.持续时间（500）
.attr（'x'，x刻度）；
};
d3.选择（“#左”）。单击（“单击”，函数（）{
if（xScale.domain（）[0]-1>-numVisible）{
域（[xScale.domain（）[0]-1，xScale.domain（）[1]-1]）；
更新（）；
}else if（xScale.domain（）[0]-1==-numVisible）
{
域（[xScale.domain（）[0]+numRects，xScale.domain（）[1]+numRects]）；
更新（）；
}
});
d3.选择（“#right”）。单击（“click”，function（）{
if（xScale.domain（）[0]+1

您是否希望它是无缝的、无限的延续，这样就不会出现滚动动画？基本上，你只要一直点击鼠标右键，它就会循环你的方块列表？很抱歉回复太晚了。。。我想添加一个无限延续。。。。