这是我的代码,我正在添加一系列矩形 - 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);
答案 0 :(得分:3)
这很有趣......所以,我想我在你的另一个问题中建议了这种方法,但基本上我将剪辑路径应用到矩形:
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();
});
瞧,工作的jsFiddle:http://jsfiddle.net/reblace/74qrC/9/
现在,诀窍是在这些框中加载图像,但你应该能够进行一些谷歌搜索,以了解如何将图像应用于svg元素,并且有足够的资源来帮助你做到这一点。