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

Question

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

10

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

这个方法很有效，可以将它们正确地水平对齐在页面的中间。

然而，我无法弄清如何将每个圆形转换为正方形或矩形。

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

- royhowie

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user688877 · Accepted Answer

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