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

但是谢谢...