создавая увеличенный дубликат d3.js элемента OnClick событие

Question

Это код: http://jsfiddle.net/nikunj2512/74qrC/18/

Я использую d3.js.

То, что я пытаюсь сделать, - это когда пользователь нажимает на любой из прямоугольников, тогда из них будет отображаться точная копия прямоугольника, но большего размера (вдвое больше, чем исходный прямоугольник).

Я добавил метод 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) 
}); 

Пожалуйста, помогите мне ...

Answer 1

Вы можете зарегистрировать событие щелчка слушатель на ваших прямых с помощью selection.on. Он будет вызываться, когда щелчок будет нажат так, чтобы this ссылался на щелкнутый узел. Вы можете использовать это для создания нового прямоугольника с удвоенным размером.

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")); 
}); 

Answer 2

Я получил это .. Были некоторые ошибки в коде, но я установил ...

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

Но спасибо ...