如何将圆形更改为带有d3.js的正方形 [英] How to change a circle into a square with d3.js

问题描述

在网页上附加25个圆圈后，我执行以下函式：

After appending 25 circles to the page, I run the following function:

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

这种方法工作得很好，并且沿着页面中间水平排列。

This works well and correctly lines them up horizontally along the middle of the page.

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

However, I couldn't figure out how to then transform each circle into a square or rectangle.

我应该如何处理这个问题？

How should I approach this problem?

推荐答案

在svg的建议中，没有变形可能的圆形成为一个正方形。你可以尝试做什么，如果你有控制这部分，是绘制正方形而不是圆形，并应用一个边界半径。像这样：

In the svg recomendation there are no transformation possible for the circle shape to become a square. What you can try to do, and if you have control over this part, is to draw squares instead of circles and apply a border radius on it. Something like this:

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

然后，从圆圈到正方形的转换可以这样完成：

Then the transition from a circle to a square could be done as:

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

这篇关于如何将圆形更改为带有d3.js的正方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！