D3.js缩放对象而不改变其位置

时间:2015-11-28 15:37:38

标签: javascript css d3.js svg

我需要缩放svg对象而不改变其相对位置。 特别是我有一个组包含一个矩形和一个带有一些圆的组,我想创建一个转换,改变矩形的宽度和高度,增加其大小相同的比例,并用相同比例的圆缩放组矩形因子但不改变其位置。

var rect = d3.select("svg").selectAll("rect")
  .transition()
  .duration(750)
  .attr("x", function(d) { return tx(d.x); })
  .attr("y", function(d) { return ty(d.y); })
  .attr("width", function(d) { return tx(d.x + d.dx) - tx(d.x); })
  .attr("height", function(d) { return ty(d.y + d.dy) - ty(d.y); });

var tree = d3.selectAll("g.tree")
  .transition()
  .duration(750)
  .attr("transform", function(d) {
    var sx = (tx(d.x + d.dx) - tx(d.x))/x(d.dx),
    sy = (ty(d.y + d.dy) - ty(d.y))/y(d.dy),
    s;
    if(sx > sy) {
      s = sy;
      rx = (tx(d.x)-x(d.x));
      ry = (ty(d.y)-y(d.y));
    }
    else {
    s = sx;
    rx = (tx(d.x)-x(d.x));
    ry = (ty(d.y)-y(d.y));
    }
    return "scale("+s+")"+"translate("+rx+","+ry+")";});

  d3.event.stopPropagation();

0 个答案:

没有答案