在D3.js中旋转对象

Question

我想根据某些数据旋转矩形。用下面的代码，旋转适用于整行。我怎样才能让每个“矩形”都有自己的轮换应用，并保持在同一条线上？

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

这就是rotate正常行为，因为translate属性的rotate函数绕坐标系统（0,0）的原点的元素。

一个简单的方法是设置在同一位置翻译：

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>