当我使用 d3.js 在多级树形图中单击矩形时如何调整宽度和高度？答案

【问题标题】：how to adjust width and height when i click the rect in multilevel treeemap using d3.js?当我使用 d3.js 在多级树形图中单击矩形时如何调整宽度和高度？
【发布时间】：2016-04-26 11:42:26
【问题描述】：

这是我的 js 代码。单击矩形时，我必须调整宽度和高度。例如，假设树形图中有五个矩形，如果我单击一个矩形意味着我将调整整个宽度和高度，我也必须调整文本。

<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>

【问题讨论】：

你的代码没有运行。
我的树形图是使用我们自己的产品完成的...但我只应用了 d3 代码缩放选项和可点击选项..
如何使用这个 d3.js 代码调整宽度和高度？

标签： javascript d3.js

【解决方案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){
    	d3.select(this)
  			.attr('width', function(f){ return f.clicked ? 60 : 20})
  			.attr('height', function(f){ return f.clicked ? 60 : 20})
        .each(function(d){ console.log(d.clicked);d.clicked = !d.clicked})
    });

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;

【讨论】：