从中心缩放矩形元素

Question

我目前正在使用rect 元素作为地图上的点，并且我想缩放它们的大小，但 D3 动画始终会从左上角开始为宽度/高度的变化设置动画。有没有办法从中心点缩放矩形，以便在制作动画时向各个方向扩展？

这是简单的 D3 代码。它正在对宽度、高度 rx 和 ry 的变化进行动画处理。

.selectAll(".anchor")
    .transition()
    .duration(800)
    .delay(function (d, i) {
        return i * 50;
    })
    .attr("fill", _graphics.colors.red)
    .attr("stroke", _graphics.colors.charcoal)
    .attr("width", 10)
    .attr("rx", function (d) {
        return 10 / 2
    })
    .attr("ry", function (d) {
        return 10 / 2
    });

Answer 1

您可以使用所有参数（x、y、width、height）。如果width 应该增加100，那么将x 减少100/2=50 将使矩形看起来从其中心开始增长：

var svg = d3.select("body").append("svg")
  .attr("width", 700)
  .attr("height", 400);

var data = [
  { x: 50, y: 50, width: 25, height: 50 },
  { x: 180, y: 65, width: 40, height: 20 }
];

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return d.x; })
  .attr("y", function(d) { return d.y; })
  .attr("width", function(d) { return d.width; })
  .attr("height", function(d) { return d.height; })
  .style("fill", "blue")
  .transition()
    .duration(3000)
    .attr("x", function(d) { return d.x - 25; })
    .attr("y", function(d) { return d.y - 50; })
    .attr("width", function(d) { return d.width + 50; })
    .attr("height", function(d) { return d.height + 100; });

<script src="https://d3js.org/d3.v5.js"></script>

Answer 2

为了完整起见，您可以使用transform 属性中的scale 来做到这一点。

您需要做的就是在缩放时平移一半的宽度和高度。所以，借用Xavier Guilhot的代码，你只需要：

"translate(" + (-(d.x + d.width / 2) * (factor - 1)) + 
    "," + (-(d.y + d.height / 2) * (factor - 1)) + ") scale(" + factor + ")"

这是使用transform 属性和3 作为因素的替代版本：

var svg = d3.select("body").append("svg")
  .attr("width", 700)
  .attr("height", 400);

var data = [{
    x: 50,
    y: 50,
    width: 25,
    height: 50
  },
  {
    x: 180,
    y: 65,
    width: 40,
    height: 20
  }
];

var factor = 3;

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) {
    return d.x;
  })
  .attr("y", function(d) {
    return d.y;
  })
  .attr("width", function(d) {
    return d.width;
  })
  .attr("height", function(d) {
    return d.height;
  })
  .style("fill", "blue")
  .transition()
  .duration(3000)
  .attr("transform", function(d) {
    return "translate(" + (-(d.x + d.width / 2) * (factor - 1)) + "," + (-(d.y + d.height / 2) * (factor - 1)) + ") scale(" + factor + ")"
  });

<script src="https://d3js.org/d3.v5.js"></script>