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将使得矩形似乎从其中心增长：

＆＃13;

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; });

＆＃13;

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

＆＃13;

Answer 2

为了完整起见，您只需使用scale属性中的transform即可。

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

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

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

＆＃13;

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 + ")"
  });

＆＃13;

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

＆＃13;

从中心缩放rect元素

2 个答案: