如何使用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);