Question

我正在使用dragdealer JS D3.js。我正在做的是，当您拖动dragdealer JS制作的滑块时，D3.js生成的元素将像图片滑块一样移动。

以下是我写的代码：code。

现在这个代码存在两个问题：

1）此代码适用于FireFox，但不适用于Chrome＆amp; IE 10？

2）如何配置滑块，以便在一张幻灯片上只有一个图块移动到视图中，只有一个图块会移出？

瓷砖或矩形的数量不固定。根据用户的不同，可以有任意数量的图块。

代码：

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的值会根据切片的数量而改变。

请帮帮我。

Answer 1

我遇到了一些问题：http://jsfiddle.net/SqKZv/1/

在Chrome中，您的svg元素需要height属性集
在Chrome / IE中，您似乎无法将transform属性应用于SVG元素，我真的很惊讶这在FireFox中有效。我将所有rect元素包装在g元素中并对其进行了转换。

D3本身拖得很好，所以你不需要Dragdealer来做这件事。除了d3.behavior.drag之外，您还可以查看d3.svg.brush，特别是这些捕捉示例，以获得您想要的内容：

刷子捕捉http://bl.ocks.org/mbostock/6232537
Brush Snapping II http://bl.ocks.org/mbostock/6232620

Answer 2

您可能还想尝试名为brush的新D3功能：https://github.com/mbostock/d3/wiki/SVG-Controls

这是我使用画笔实现您提到的类似功能的示例。 https://github.com/CSE512-14W/a3-chaoyu-aniket

D3.js和dragdealer JS

2 个答案: