0

这是滑块的代码 - http://jsfiddle.net/nikunj2512/74qrC/14/

在这段代码中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();
}
});
4

0 回答 0