如何使用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 recomendation中，圆形不可能变成正方形。您可以尝试做什么，如果您可以控制此部分，则绘制正方形而不是圆形并在其上应用边界半径。像这样：

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