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>