如何使用 d3.js 将圆形变为正方形

Question

在页面上添加 25 个圆圈后，我运行以下函数：

var transitionPage = function () {
  startThePage();
  var height = $(document).height() - 20
    , width = $(document).width()
    ;

  d3.selectAll("circle")
    .transition().duration(2500)
      .style("fill", "steelblue")
      .attr("r", 15)
    .transition().duration(1000)
      .attr("cy", (height / 2))
    .each(function (d, i) {
      d3.select(this)
        .transition().duration(1000)
        .attr("cx", 30 + (i * width / 25));
    });
}

这很好用，并且可以正确地将它们沿页面中间水平排列。

但是，我不知道如何将每个圆圈转换为正方形或矩形。

我应该如何解决这个问题？

Answer 1

在 svg 建议中，圆形无法转换为方形。如果您可以控制这部分，您可以尝试做的是绘制正方形而不是圆形并在其上应用边框半径。像这样的：

d3.select("body").select("svg").append("rect")
    .attr("rx",100)
    .attr("ry",100)
    .attr("x",100)
    .attr("y",100)
    .attr("width",100)
    .attr("height",100)
    .attr("stroke","black")
    .attr("fill","white");

那么从圆形到方形的过渡可以这样完成：

d3.select("rect")
    .transition()
    .duration(1000)
    .attr("rx",0)
    .attr("ry",0);