javascript - 从中心缩放矩形元素

Question

我目前正在使用 rect 元素作为 map 上的点，我想缩放它们的大小，但 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>