2

これが私のコードです。一連の長方形を追加しています - http://jsfiddle.net/nikunj2512/74qrC/6/

ユーザーが長方形のボックスをナビゲートできるように、ナビゲーション用の左矢印ボタンと右矢印ボタンがある画像スライダーのようなスライダーを追加したいと考えています。

このことを達成する方法がわかりません。

これはd3.js、長方形のボックスを作成しているコードです:

var width = 4000,
height = 200,
margin = 2,
nRect = 20,
rectWidth = (width - (nRect - 1) * margin) / nRect,
svg = d3.select('#chart').append('svg')
    .attr('width', width)
    .attr('height', height);

var data = d3.range(nRect),
posScale = d3.scale.linear()
    .domain(d3.extent(data))
    .range([0, width - rectWidth]);

svg.selectAll('rect')
    .data(data)
   .enter()
    .append('rect')
    .attr('x', posScale)
    .attr('width', rectWidth)
    .attr('height', height);
4

1 に答える 1

3

これは楽しかったです...だから、私はあなたの他の質問でこのアプローチを提案したと思いますが、基本的には長方形にクリップパスを適用します:

svg.append("defs").append("clipPath")
.attr("id", "clip")
    .append("rect")
        .attr("width", clipWidth)
        .attr("height", clipHeight);

var g = svg.append("g");
g.selectAll("rect").data(data)
    .enter()
    .append('rect')
        .attr("class", "area").attr("clip-path", "url(#clip)")
        .attr('x', xScale)
        .attr('width', rectWidth)
        .attr('height', rectHeight)
        .style('fill', d3.scale.category20());

...そして、ドメインを上下にゆがめ、500 ミリ秒の遅延で遷移を使用してプロットを更新します。

var update = function(){
    g.selectAll("rect")
        .transition().duration(500)
        .attr('x', xScale);
};

d3.select("#left").on("click", function(){ 
    xScale.domain([xScale.domain()[0] - 1, xScale.domain()[1] - 1]);
    update();
});

そして出来上がり、動作するjsFiddle：http://jsfiddle.net/reblace/74qrC/9/

ここでの秘訣は、これらのボックスに画像をロードすることですが、画像を svg 要素に適用する方法についてグーグルで検索できるはずです。それを行うのに役立つリソースがたくさんあります。

于 2013-09-18T14:12:12.477 に答える