如何使用 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屋!