d3.jsを使用してマルチレベルツリーマップの四角形をクリックすると、幅と高さを調整する方法は？

Question

これは私のjsコードです。長方形をクリックすると幅と高さを調整する必要があります。たとえば、ツリーマップに5つの矩形があるとします.1つの矩形をクリックすると、全体の幅と高さが調整され、テキストも調整する必要があります。

このような何かを行う必要があります

<script src="/js/jquery.min.js"></script> 
 
<script src="/js/d3.v3.min.js"></script> 
 
<script> 
 
function transformrect(from, to) { 
 
    /* Returns the transform="" attribute to resize from rectangle to to rectangle */ 
 
    var x, y, 
 
     xscale = to.width/from.width, 
 
     yscale = to.height/from.height; 
 
    if (xscale >= yscale) { 
 
     x = (to.x + to.width/2)/yscale - (from.x + from.width/2); 
 
     y = to.y/yscale - from.y; 
 
     scale = yscale; 
 
    } else { 
 
     y = (to.y + to.height/2)/xscale - (from.y + from.height/2); 
 
     x = to.x/xscale - from.x; 
 
     scale = xscale; 
 
    } 
 
    return 'scale(' + scale + ')translate(' + x + ',' + y + ')'; 
 
} 
 

 
var root = {x:10, y:10, width:1150, height:400}; 
 
d3.selectAll('.l0').on('click', function() { 
 
    var transform = transformrect(d3.select(this).select('rect').node().getBBox(), root); 
 
    d3.selectAll('.zoommap rect, .zoommap text') 
 
     .transition() 
 
     .duration(500) 
 
     .attr('transform', transform); 
 
    d3.select(this).style('display', 'none'); 
 
}); 
 
d3.selectAll('.l1').on('click', function() { 
 
    var transform = transformrect(d3.select(this).select('rect').node().getBBox(), root); 
 
    d3.selectAll('.zoommap rect, .zoommap text') 
 
     .transition() 
 
     .duration(500) 
 
     .attr('transform', transform); 
 
    d3.select(this).style('display', 'none'); 
 
}); 
 
d3.selectAll('.l2').on('click', function() { 
 
    var transform = transformrect(d3.select(this).select('rect').node().getBBox(), root); 
 
    d3.selectAll('.zoommap rect, .zoommap text') 
 
     .transition() 
 
     .duration(500) 
 
     .attr('transform', transform); 
 
    d3.select(this).style('display', 'none'); 
 
}); 
 
d3.selectAll('.l3 rect').on('click', function() { 
 
    d3.selectAll('.zoommap rect, .zoommap text') 
 
     .transition() 
 
     .duration(500) 
 
     .attr('transform', 'scale(1)translate(0,0)') 
 
     .each('end', function() { 
 
      d3.selectAll('.l0').style('display', undefined); 
 
     }); 
 
}) 
 
</script>

Answer 1

：

d3.select('rect').on('click',function(d){ 
    d3.select(this) 
    .attr('width', changeWidthHere) 
    .attr('height', changeHeightHere) 
    .text(changeTextHere); 
} 

var svg = d3.select('body').append('svg').attr('width', 500).attr('height', 500); 
 

 
var data = [{ 
 
value : 1, 
 
text : 'One' 
 
}, 
 
{ 
 
value : 2, 
 
text : 'Two' 
 
}, 
 
{ 
 
value : 3, 
 
text : 'Three' 
 
}] 
 

 
svg.selectAll('rect') 
 
    .data(data) 
 
    .enter().append('rect') 
 
    .attr('x', function(d,i) { d.clicked=false; return 100+100*i; }) 
 
    .attr('y', function(d,i) { return 0; }) 
 
    .attr('width', function() { return 60; }) 
 
    .attr('height', function() { return 60; }) 
 
    .attr('fill', function() { return 'red'; }) 
 
    .on('click',function(d){ 
 
    \t d3.select(this) 
 
    \t \t \t .attr('width', function(f){ return f.clicked ? 60 : 20}) 
 
    \t \t \t .attr('height', function(f){ return f.clicked ? 60 : 20}) 
 
     .each(function(d){ console.log(d.clicked);d.clicked = !d.clicked}) 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>