我正在将 dragdealer JS
与 D3.js
结合使用。我正在做的是,当您拖动 dragdealer JS
制作的 slider 时,D3.js
制作的元素将像图片 slider 一样移动。
这是我编写的代码:code .
现在这段代码有两个问题:
1) 此代码可以在 FireFox 中运行,但不能在 Chrome 和 IE 10 中运行?
2) 如何配置 slider ,以便在一张幻灯片上只有一个图 block 会移入 View 且只有一个图 block 会移出?
图 block 或矩形的数量不固定。根据用户的不同,可以有任意数量的图 block 。
代码:
var width = 4000,
height = 200,
margin = 2,
nRect = 20,
rectWidth = (width - (nRect - 1) * margin) / nRect,
svg = d3.select('#chart').append('svg')
.attr('width', width);
var data = d3.range(nRect),
posScale = d3.scale.linear()
.domain(d3.extent(data))
.range([0, width - rectWidth]);
console.log(rectWidth)
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', posScale)
.attr('width', rectWidth)
.attr('height', height);
function redraw(x)
{
svg.transition()
.ease("linear")
.attr("transform", "translate(" + -(x*rectWidth) + ")" );
console.log(-(x*rectWidth));
}
var step = nRect/2;
new Dragdealer('magnifier',
{
steps: step,
snap: true,
animationCallback: function(x, y)
{ console.log(x*10)
redraw(x*step);
}
});
我正在尝试设计一种方法,使steps
的值根据图 block 的数量而变化。
请帮助我。
最佳答案
您遇到了一些问题,我已在此处修复:http://jsfiddle.net/SqKZv/1/
- 在 Chrome 中,您的
svg
元素需要设置height
属性 - 在 Chrome/IE 中,您似乎无法将
transform
属性应用到SVG
元素,实际上我很惊讶这在 FireFox 中有效。我将所有rect
元素包装在g
元素中并对其进行了转换。
D3 本身就可以很好地进行拖动,因此您不需要 Dragdealer 来执行此操作。除了d3.behavior.drag ,您可以查看d3.svg.brush ,特别是这些捕捉以获得您想要的东西的示例:
关于javascript - D3.js 和 Dragdealer JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18878803/