Javascript 在d3.js元素中添加一个滑块

这是我的代码，我正在添加一系列矩形-

我想添加一个类似于图像滑块的滑块，该滑块具有用于导航的左右箭头按钮或类似按钮，以便用户可以在矩形框中导航

我不知道如何实现这件事

这是创建矩形框的

d3.js

代码：

var width = 4000,
height = 200,
margin = 2,
nRect = 20,
rectWidth = (width - (nRect - 1) * margin) / nRect,
svg = d3.select('#chart').append('svg')
    .attr('width', width)
    .attr('height', height);

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

svg.selectAll('rect')
    .data(data)
   .enter()
    .append('rect')
    .attr('x', posScale)
    .attr('width', rectWidth)
    .attr('height', height);

---

这很有趣。。。所以，我想我在你的另一个问题中建议了这种方法，但基本上我将剪辑路径应用于矩形：

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

…然后我向上或向下倾斜域，并使用500毫秒延迟的转换更新绘图：

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

d3.select("#left").on("click", function(){ 
    xScale.domain([xScale.domain()[0] - 1, xScale.domain()[1] - 1]);
    update();
});

瞧，一个正在工作的人：

---

现在，诀窍是将图像加载到这些框中，但是您应该能够通过谷歌搜索如何将图像应用到svg元素，并且有大量的资源可以帮助您做到这一点。

导航是什么意思？如果你的意思是“选择”一些东西，那就很容易了——在按钮的点击事件处理程序中，你只需要移动到相应的下一个元素。谢谢你的帮助。。。。你真是太棒了。。。。。请看一下……的实施情况。。。。。我正在使用。。。这不适用于chrome，但适用于firefox。。。你能告诉我这方面的帮助吗？要绑定滑块，诀窍是根据可见的矩形数检查域的边界。参见更新提琴：关于FF和Chrome中dragdealer的问题是另一个问题，你能接受这个问题并发布一个新问题吗？谢谢。。。。。。。。好的，我已经创建了一个新问题，请看一看，当你有时间。。。。这是到的链接，如果可能的话，我们可以显示像1/10之类的东西吗？