D3.js和dragdealer JS [英] D3.js and dragdealer JS

问题描述

我使用 dragdealer JS 与 D3.js 。我所做的是，当你拖动由 dragdealer JS 制作的滑块由 D3.js 像图片滑块。

I am using dragdealer JS with D3.js. What i am doing is that when You drag the slider made by dragdealer JS the elements made by D3.js will move like a picture slider.

这是我写的代码：代码。

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

Now there are two problems with this code:

这段代码在FireFox工作，但不是在Chrome& IE 10？

1) This code is working in FireFox but not in Chrome & IE 10?

2）如何配置滑块，使得在一个幻灯片上，只有一个图块将移动到视图中，只有一个图块将移出？

2) How to configure the slider so that on one slide, only one tile will move into the view and only one will move out?

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

The number of tiles or rectangles are not fixed. There can be any number of tiles depending on the user.

代码：

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 会根据图块的数量而改变。

i am trying to devise a way so that the value of steps will change according to the number of tiles.

请帮助我。

推荐答案

您有一些问题，我已在这里修复： http：// jsfiddle。 net / SqKZv / 1 /

You had a few problems that I've fixed here: http://jsfiddle.net/SqKZv/1/

1. 在Chrome中，您的 svg 元需要 height 属性集


2. 在Chrome / IE中，似乎不能应用 transform 属性到你的 SVG 元素，我实际上惊讶这在FireFox中有效。我在 g 元素中包装了所有的 rect 元素，并将其转换。

1. In Chrome your svg element needed the height property set
2. In Chrome/IE, it doesn't appear that you can apply the transform attribute to your SVG element, I'm actually surprised this works in FireFox. I wrapped all of your rect elements in a g element and transformed that.

D3本身拖动得很好，所以你不需要Dragdealer来做到这一点。除了 d3.behavior.drag ，您还可以查看 d3.svg.brush ，具体来说，这些例子可以捕捉到你想要的东西：

D3 does dragging very well by itself, so you don't need Dragdealer to do this. In addition to d3.behavior.drag, you can check out d3.svg.brush, specifically these examples of snapping to get what you want:

• 画笔捕捉 http：// bl .ocks.org / mbostock / 6232537


• Brush Snapping II http://bl.ocks.org/mbostock/6232620

• Brush Snapping http://bl.ocks.org/mbostock/6232537
• Brush Snapping II http://bl.ocks.org/mbostock/6232620

这篇关于D3.js和dragdealer JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！