Возникают проблемы с получением значений переменных в функции поворота в javascript / svg / d3

Question

<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>

Это мой код для звезды. Я должен сделать дизайн из 12 звезд около 800 350 с радиусом около 50. Проблема 30 * i интерпретируется как 30 * i вместо умножения как 0,3060,90 .... градусов.Это действительно странно, потому что я мог получить доступ к значениям в прошлом без вычислений в прямоугольных преобразованиях.

Пожалуйста, не говорите мне вычислять значения x, y, используя x = a + rcos theta.Я хочу сделать это другим, более элегантным способом. Пожалуйста, будьте добры, я новичок в этом языке.

Answer 1

Ваша переменная '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)