1

これはコードです: http://jsfiddle.net/nikunj2512/74qrC/18/

を使用してd3.jsいます。

私がやろうとしているのは、ユーザーが長方形のいずれかをクリックすると、長方形の正確なコピーですが、サイズが大きい (元の長方形の 2 倍) がそれらの下に表示されることです。

onclick メソッドを追加した後、古い四角形の属性を取得して、より大きな四角形を作成しました。しかし、それは機能していません。私を助けてください

これを行う方法がわかりません...助けてください...

var numVisible = 4;
var rectWidth = 100,
rectHeight = 100,
rectPadding = 2,
numRects = 10;

var clipWidth = numVisible * rectWidth + (numVisible - 1) * rectPadding,
clipHeight = rectHeight;

var width = (rectWidth * numRects) + ((numRects - 1) * rectPadding),
height = rectHeight;

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

var svg = d3.select('#chart').append('svg')
    .attr('width', clipWidth)
    .attr('height', clipHeight);
var bigRectContainer = d3.select('#bigRectContainer').append('svg')
    .attr('width', clipWidth*2)
    .attr('height', clipHeight*2);

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());

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

d3.select("#left").on("click", function(){ 
if(xScale.domain()[0] - 1 > -numVisible){
    xScale.domain([xScale.domain()[0] - 1, xScale.domain()[1] - 1]);
    update();
}else if(xScale.domain()[0] - 1 == -numVisible)
{
    xScale.domain([xScale.domain()[0] + numRects, xScale.domain()[1] + numRects]);
    update();
}
});

d3.select("#right").on("click", function(){ 
if(xScale.domain()[0] + 1 < numRects){
    xScale.domain([xScale.domain()[0] + 1, xScale.domain()[1] + 1]);
    update();
}else if(xScale.domain()[0] + 1 == numRects)
{
    xScale.domain([xScale.domain()[0] - numRects, xScale.domain()[1] - numRects]);
    update();
}
});


svg.selectAll("rect").on("click", function() {
    var littleRect = d3.select(this);
console.log(littleRect)

var bigRect = bigRectContainer.append("rect").attr("width", littleRect.attr("width") * 2)
    .attr("height", littleRect.attr("height") * 2)
});

私を助けてください...

4

2 に答える 2

0

selection.on を使用して、四角形にクリック イベント リスナーを登録できます。thisクリックされたノードを参照するような四角形がクリックされると呼び出されます。これを使用して、サイズが 2 倍の新しい四角形を作成できます。

g.selectAll("rects").on("click", function() {
    var littleRect = d3.select(this);

    bigRectContainer.select("rect").remove();
    bigRectContainer.append("rect")
        .attr("class", "bigrect")
        .attr("width", littleRect.attr("width") * 2)
        .attr("height", littleRect.attr("height") * 2)
        .style("fill", litteRect.attr("fill"));
});
于 2013-09-19T20:01:12.283 に答える
0

わかりました..コードにいくつかのエラーがありましたが、修正しました...

var bigRectContainer = d3.select('#bigRectContainer').append('svg')
    .attr('width', clipWidth*2)
    .attr('height', clipHeight*2);
svg.selectAll("rect").on("click", function() {
var littleRect = d3.select(this);
console.log(littleRect)

var bigRect = bigRectContainer.append("rect").attr("width", littleRect.attr("width") * 2)
    .attr("height", littleRect.attr("height") * 2).style('fill', d3.scale.category20())
});

でもありがとう...

于 2013-09-20T07:27:16.780 に答える