D3.js 和 dragdealer JS答案

【问题标题】：D3.js and dragdealer JSD3.js 和 dragdealer JS
【发布时间】：2013-09-18 17:39:16
【问题描述】：

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

这是我写的代码：code.

现在这段代码有两个问题：

1) 此代码在 FireFox 中有效，但在 Chrome 和 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 的值会根据图块的数量而变化。

请帮帮我。

【问题讨论】：

标签： javascript html svg d3.js

【解决方案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
画笔捕捉 II http://bl.ocks.org/mbostock/6232620

【讨论】：

Langdon 谢谢...。在所有示例拖动示例中，所有元素对用户都是可见的，并且我们正在拖动，但我试图在图像滑块方面实现类似的效果。如果您对此有任何想法，请让我知道除了这个滑块之外......

【解决方案2】：

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

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

【讨论】：