2

で使用dragdealer JSしていD3.jsます。私がやっていることは、あなたが作っdragdealer JSた要素によって作られたスライダーをドラッグするD3.jsと、絵のスライダーのように動くということです。

ここに私が書いたコードがあります: code .

このコードには 2 つの問題があります。

1) このコードは FireFox では機能しますが、Chrome & IE 10 では機能しませんか?

2) 1 つのスライドで、1 つのタイルのみがビューに移動し、1 つだけが移動するようにスライダーを構成する方法は?

タイルまたは長方形の数は固定されていません。ユーザーに応じて、任意の数のタイルが存在する可能性があります。

コード：

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タイルの数に応じて の値が変わるように工夫しようとしています。

私を助けてください。

4

2 に答える 2

0

ブラシと呼ばれる新しい D3 機能を試してみることもできます: https://github.com/mbostock/d3/wiki/SVG-Controls

あなたが言及したのと同様の機能を実装するためにブラシを使用して作成した例を次に示します。 https://github.com/CSE512-14W/a3-chaoyu-aniket

于 2014-02-16T03:55:39.237 に答える