D3.js의 객체 회전

Question

일부 데이터에 따라 직사각형을 회전하려고합니다. 다음 코드를 사용하면 회전이 전체 행에 적용됩니다. 각각의 "직사각형"을 자신의 회전을 적용하고 동일한 라인에 유지하려면 어떻게해야합니까? translate 특성 rotate 함수는 좌표 시스템 (0,0)의 원점 주위의 요소를 회전하기 때문에, rotate의 정상적인 동작의

let canevas = d3.select("body") 
    .append("svg") 
    .attr("width", 1000) 
    .attr("height", 1000); 

let rectangles = d3.select("svg") 
    .selectAll("rect") 
    .data([10, 20, 30, 40]) 
    .enter() 
    .append("rect") 
    .attr("x", (d, i) => (i * 30) + 30) 
    .attr("y", 20) 
    .attr("width", 20) 
    .attr("height", 20) 
    .attr("transform", (d) => `rotate(${d})`); 

Answer 1

.

let canevas = d3.select("body") 
 
    .append("svg") 
 
    .attr("width",300) 
 
    .attr("height",100); 
 

 
let rectangles = d3.select("svg") 
 
    .selectAll("rect") 
 
    .data([10,20,30,40]) 
 
    .enter() 
 
    .append("rect") 
 
    .attr("width",20) 
 
    .attr("height",20) 
 
    .attr("transform", (d,i) => `translate(${(i*30)+30},30) rotate(${d})`);

<script src="https://d3js.org/d3.v4.min.js"></script>

을 :

쉬운 해결책은 번역 같은에서 위치를 설정하는 것입니다