时间戳

首页 > 解决方案 > 在 javascript/svg/d3 中的旋转函数中获取变量值时遇到问题

javascript - 在 javascript/svg/d3 中的旋转函数中获取变量值时遇到问题

问题描述

<script>
    for(i = 0;i < 12;i++) {
        svg.append("polygon")
           .attr("points", "0,0.9511, 1.0,0.95111, 1.309,0,  1.618,0.9511, 2.618,0.9511, 1.809,1.5388, 2.118,2.4899, 1.309,1.9021, 0.5,2.4899, 0.809,1.5388")
           .attr("transform", "translate(850, 350), scale(8),rotate(30*i, 800,350)")
           .style("fill", "yellow");
    }
</script>

这是我的星星代码。我必须设计一个半径约为 50 的 800,350 周围的 12 颗星星。问题是 30*i 被解释为 30*i 而不是乘以 0,30,60,90.. ...度。这真的很奇怪，因为我能够在不计算 rect 转换的情况下访问过去的值。

请不要告诉我使用 x=a+rcos theta 来计算 x,y 的值。我想以另一种更优雅的方式来做这件事也请善待我是这门语言的新手。

标签： javascriptd3.jssvg

解决方案

您的变量 'i' 呈现为字符串 'i' 而不是度数值。尝试将您的代码更改为类似于下面的代码，看看它是否能解决您的问题：

for(i=0;i<12;i++)
{

svg.append("polygon").attr("points", "0,0.9511, 1.0,0.95111, 1.309,0,  1.618,0.9511, 2.618,0.9511, 1.809,1.5388, 2.118,2.4899, 1.309,1.9021, 0.5,2.4899, 0.809,1.5388")
.attr("transform", `translate(850, 350), scale(8),rotate(30*${i}, 800,350)`)
.style("fill", "yellow");
}

我已将属性字符串值“translate(850, 350), scale(8),rotate(30*i, 800,350)”更改为使用模板字符串来使用“i”的实际值： translate(850, 350), scale(8),rotate(30*${i}, 800,350)

推荐阅读