Добавить ползунок в d3.js элемента

Question

Вот мой код, я добавляю серию прямоугольника - http://jsfiddle.net/nikunj2512/74qrC/6/

я хочу добавить ползунок как слайдер изображений, который оставил и кнопки со стрелкой вправо для навигации или что-то аналогично, чтобы пользователь мог перемещаться по прямоугольным прямоугольникам.

Я не знаю, как достичь этой цели.

Это 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); 

Answer 1

Это было весело ... Так что, я думаю, что я предложил этот подход в ваш другой вопрос, но в основном я применяю путь клип к прямоугольники:

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

... а потом я искажать домен вверх или вниз и обновить график, используя переход с задержкой 500ms:

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

и вуаля, рабочий jsFiddle: http://jsfiddle.net/reblace/74qrC/9/

Теперь, хитрость заключается в том, чтобы загружать изображения в этих коробках, но вы должны быть в состоянии сделать некоторые прибегая к помощи, как применить изображения в SVG элементов и есть много ресурсов из там, чтобы помочь вам в этом.